jQuery UI插件實現百度提詞器效果
更新時間:2016年11月21日 16:25:47 作者:lkplkplkplkp
這篇文章主要介紹了jQuery UI插件實現百度提詞器效果,每個輸入框中有相應的文字提示,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery自動文字提示功能,供大家參考,具體內容如下
需要在項目中實現動態(tài)添加,刪除輸入框,每個框里面都要有文字提示。
js部分:
//自動完提示
function tip(obj) {
$( obj ).autocomplete({
minLength: 0,
source: function (request, response) {
//alert('dsada');
var title = $('#test1').val();
$.ajax({
url: "HotList.php?act=title",
type: 'get',
dataType: "json",
data: request,
success: function (dataObj) {
// request對象只有一個term屬性,對應用戶輸入的文本
// response是一個函數,在你自行處理并獲取數據后,將JSON數據交給該函數處理,以便于autocomplete根據數據顯示列表
// 自行處理并獲取數據...
//var dataObj = data; // 表示處理后的JSON數據
response(dataObj); // 最后將數據交給autocomplete去展示
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert('獲取信息失敗');
//alert(XMLHttpRequest.status);
//alert(XMLHttpRequest.readyState);
//alert(textStatus);
}
});
},
focus: function( event, ui ) {
$( obj ).val( ui.item.title );
return false;
},
select: function( event, ui ) {
//$( "#project" ).val( ui.item.title );
//$( "#project-id" ).val( ui.item.id );
$(obj).val( ui.item.title );
$(obj).prev().val( ui.item.id );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.id + "<br>" + item.title + "</a>" )
.appendTo( ul );
};
}
html:
<div class="control-group">
<label class="control-label">*相關推薦</label>
<div class="controls">
<?php foreach($listOne['recommend_title'] as $k => $v) { ?>
<div>
<input type="hidden" name="tuijian_id[]" value="<?php echo $listOne['title_id'][$k]; ?>" />
<input type="text" name="tuijian[]" class="show_goods" onkeyup="tip(this)" value="<?php echo $v;?>"/> <span class="btn" onclick="del(this);">刪除</span>
</div>
<? } ?>
<p id="project-description"></p>
<span class="btn" id="add" onclick="add(this);">添加</span>
<script>
//添加推薦節(jié)點
function add(obj) {
var str = "<div><input type='hidden' name='tuijian_id[]' /><input type='text' class='show_goods' name='tuijian[]' onkeyup='tip(this)'/> <span class='btn' onclick='del(this);'>刪除</span></div>";
$(obj).before(str);
}
//刪除當前推薦節(jié)點
function del(obj) {
if($(".show_goods").length <= 3 ) {
alert('最少需要三個推薦標題');
return false;
} else {
$(obj).parent().remove();
$(obj).prev().prev().remove();
$(obj).prev().remove();
$(obj).remove();
}
}
</script>
</div>
</div>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
jQuery mobile的header和footer在點擊屏幕的時候消失的解決辦法
這篇文章主要介紹了jQuery mobile的header和footer在點擊屏幕的時候消失的解決辦法,通過給header和footer添加 data-position="fixed" 和 data-tap-toggle="false"完成此功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07
詳解jQuery移動頁面開發(fā)中的ui-grid網格布局使用
這篇文章主要介紹了jQuery移動頁面開發(fā)中的ui-grid網格布局使用,以講解多列頁面布局方式為主,需要的朋友可以參考下2015-12-12
jQuery+CSS3實現仿花瓣網固定頂部位置帶懸浮效果的導航菜單
這篇文章主要介紹了jQuery+CSS3實現仿花瓣網固定頂部位置帶懸浮效果的導航菜單,可實現頁面向下滑動后導航欄橫向懸浮并固定在頂部的功能,涉及jQuery事件響應及頁面元素屬性動態(tài)修改相關操作技巧,需要的朋友可以參考下2016-09-09

