Jquery模仿Baidu、Google搜索時自動補(bǔ)充搜索結(jié)果提示
更新時間：2013年12月26日 17:01:30 作者：
昨天研究了一下Jquery 模仿Baidu、Google收索時自動補(bǔ)充收索結(jié)果的提示，感覺效果還行，下面與大家分享下代碼
好程序就是懶人喜歡的程序。好程序員就是懶人程序員。昨天研究了一下Jquery 模仿Baidu、Google搜索時自動補(bǔ)充搜索結(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 模擬類搜索框自動完成搜索提示功能(改進(jìn))
- 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)文章
這是一個基于jquey寫的倒計時。當(dāng)然代碼有點小改動，只是改了一下展示效果。2014-05-05
這篇文章主要介紹了jquery form表單序列化為對象具體實現(xiàn),需要的朋友可以參考下2014-03-03
基于PHP和Mysql相結(jié)合使用jqGrid讀取數(shù)據(jù)并顯示
jqGrid可以動態(tài)讀取和加載外部數(shù)據(jù)，本文將結(jié)合PHP和Mysql給大家講解如何使用jqGrid讀取數(shù)據(jù)并顯示，以及可以通過輸入關(guān)鍵字查詢數(shù)據(jù)的ajax交互過程2015-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)消息滾動播放效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
jQuery實現(xiàn)立體式數(shù)字動態(tài)增加（animate方法）
本文主要分享了基于jQuery實現(xiàn)立體式數(shù)字動態(tài)增加（animate方法）的實例代碼。有很好的參考價值，需要的朋友一起來看下吧2016-12-12
用JQUERY疊加兩個INPUT框來實現(xiàn)登陸中需要輸入的用戶名、密碼來實現(xiàn)提示與用戶的輸出，使用jquery在一個INPUT框中即可實現(xiàn)2014-01-01
jQuery使用prepend()方法在元素前添加內(nèi)容用法實例
這篇文章主要介紹了jQuery使用prepend()方法在元素前添加內(nèi)容的方法,實例分析了prepend方法追加內(nèi)容的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
在QWrap群里討論時，有同學(xué)問jquery/yui等已做到極致，我們有沒必要再重復(fù)造一個叫QWrap的輪子？2011-02-02
Jquery 組合form元素為json格式,asp.net反序列化
Jquery組合form元素為json格式,asp.net反序列化實現(xiàn)代碼，大家可以具體的看下面的說明。2009-07-07
這篇文章主要介紹了jquery實現(xiàn)全屏滾動，針對全屏滾動知識進(jìn)行詳細(xì)闡述，感興趣的小伙伴們可以參考一下2015-12-12