Jquery模仿Baidu、Google搜索時自動補充搜索結(jié)果提示
更新時間:2013年12月26日 17:01:30 作者:
昨天研究了一下Jquery 模仿Baidu、Google收索時自動補充收索結(jié)果的提示,感覺效果還行,下面與大家分享下代碼
好程序就是懶人喜歡的程序。好程序員就是懶人程序員。昨天研究了一下Jquery 模仿Baidu、Google搜索時自動補充搜索結(jié)果的提示,感覺效果還行。特意和大家分享一下。所需Jquery插件。請看代碼:
<script type="text/javascript">
$().ready( function () {
$(":text").result(auto);
function auto(data){
$("#keyWord").val(data.name);
}
$("#keyWord").autocomplete(obj, {//obj是數(shù)據(jù)對象數(shù)組Json
minChars: 0, //表示在自動完成激活之前填入的最小字符
max: 5, //表示列表里的條目數(shù)
autoFill: true, //表示自動填充
mustMatch: false, //表示必須匹配條目,文本框里輸入的內(nèi)容,必須是data參數(shù)里的數(shù)據(jù),如果不匹配,文本框就被清空
matchContains: true, //表示包含匹配,相當(dāng)于模糊匹配
scrollHeight: 200, //表示列表顯示高度,默認(rèn)高度為180
formatItem: function (row) {
return row.name;
},
formatMatch: function (row) {
return row.name;
},
formatResult: function (row) {
return row.value;
}
});
});
</script>
jsp:
<div>
<h4> 模仿BaiDu,google搜索提示功能</h4>
<table>
<tr><td>名稱:<input type="text" id="keyWord" /></td></tr>
</table>
</div>
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$().ready( function () {
$(":text").result(auto);
function auto(data){
$("#keyWord").val(data.name);
}
$("#keyWord").autocomplete(obj, {//obj是數(shù)據(jù)對象數(shù)組Json
minChars: 0, //表示在自動完成激活之前填入的最小字符
max: 5, //表示列表里的條目數(shù)
autoFill: true, //表示自動填充
mustMatch: false, //表示必須匹配條目,文本框里輸入的內(nèi)容,必須是data參數(shù)里的數(shù)據(jù),如果不匹配,文本框就被清空
matchContains: true, //表示包含匹配,相當(dāng)于模糊匹配
scrollHeight: 200, //表示列表顯示高度,默認(rèn)高度為180
formatItem: function (row) {
return row.name;
},
formatMatch: function (row) {
return row.name;
},
formatResult: function (row) {
return row.value;
}
});
});
</script>
jsp:
復(fù)制代碼 代碼如下:
<div>
<h4> 模仿BaiDu,google搜索提示功能</h4>
<table>
<tr><td>名稱:<input type="text" id="keyWord" /></td></tr>
</table>
</div>
您可能感興趣的文章:
- 讓input框?qū)崿F(xiàn)類似百度的搜索提示(基于jquery事件監(jiān)聽)
- Jquery實現(xiàn)搜索框提示功能示例代碼
- jquery+php實現(xiàn)搜索框自動提示
- jquery 模擬類搜索框自動完成搜索提示功能(改進)
- jQuery 插件仿百度搜索框智能提示(帶Value值)
- 利用JQuery為搜索欄增加tag提示
- jquery 關(guān)鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應(yīng)放大”效果 的實現(xiàn)
- asp.net使用jquery實現(xiàn)搜索框默認(rèn)提示功能
- jquery實現(xiàn)非疊加式的搜索框提示效果
- 基于jQueryUI和Corethink實現(xiàn)百度的搜索提示功能
- jQuery實現(xiàn)模擬搜索引擎的智能提示功能簡單示例
相關(guān)文章
JQuery Study Notes 學(xué)習(xí)筆記(一)
jquery是當(dāng)前比較流行的js類庫,學(xué)習(xí)它可以實現(xiàn)很多功能。2010-08-08jQuery中animate()的使用方法及解決$(”body“).animate({“scrollTop”:top})
這篇文章主要介紹了關(guān)于jQuery中animate()的使用方法及解決$("body").animate({"scrollTop":top})不被Firefox支持的問題,文中介紹的非常詳細(xì),相信對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-04-04jquery Moblie入門—hello world的示例代碼學(xué)習(xí)
jquery Moblie入門:Hello World的示例代碼學(xué)習(xí),感興趣的朋友可以了解下哦2013-01-01JQuery+JS實現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果
JQuery+JS實現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果代碼,需要的朋友可以參考下。2011-08-08