文框輸入框的自動(dòng)完成和自動(dòng)提示功能可以幫助用戶快速的完成操作，是非常好的產(chǎn)品使用體驗(yàn)。這里向大家推薦一款優(yōu)秀的 jQuery 文本輸入框自動(dòng)完成 & 自動(dòng)提示插件，幫助你在網(wǎng)站中輕松添加輸入框的自動(dòng)完成和自動(dòng)提示功能。

?

在這篇文章中，我們使用? jQuery ?實(shí)現(xiàn)智能輸入框光標(biāo)的位置。它不需要圖像，是使用純粹的? CSS3 ?實(shí)現(xiàn)的，而且實(shí)時(shí)、準(zhǔn)確，這意味著你在添加或刪除文本的時(shí)候它會(huì)自動(dòng)適應(yīng)。使用事件代理機(jī)制實(shí)現(xiàn)，所以不用擔(dān)心性能問(wèn)題。

下載源碼 ? ?? 在線演示

?

主要參數(shù)介紹：

• serviceUrl：Ajax 請(qǐng)求的 URL；
• lookup：本地?cái)?shù)據(jù)數(shù)組；
• minChars：觸發(fā)自動(dòng)提示的最小字符數(shù)；
• params：請(qǐng)求的附加參數(shù)；
• formatResult：返回結(jié)果的格式化函數(shù)；
• autoSelectFirst：是否自動(dòng)選中第一個(gè)；
• onSearchStart：搜索開(kāi)始的回調(diào)函數(shù)；
• onSearchComplete：搜索完成的回調(diào)函數(shù)；
• tabDisabled：是否禁用 Tab 鍵；

?

使用方法

這個(gè)差距的使用非常簡(jiǎn)單，下面是 HTML、CSS 和 JavaScript 示例代碼。

HTML 代碼：

      <input type="text" name="country" id="autocomplete"/>
    

?

CSS 代碼：

      .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
    

?

Ajax 查找模式：

      $('#autocomplete').autocomplete({
    serviceUrl: '/autocomplete/countries',
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});
    

?

本地查找模式：

      var countries = [
   { value: 'Andorra', data: 'AD' },
   // ...
   { value: 'Zimbabwe', data: 'ZZ' }
];
 
$('#autocomplete').autocomplete({
    lookup: countries,
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});
    

?

?

本文鏈接： 優(yōu)秀 jQuery 文本輸入框自動(dòng)完成 & 自動(dòng)提示插件

編譯來(lái)源： 夢(mèng)想天空 ◆ 關(guān)注前端開(kāi)發(fā)技術(shù) ◆ 分享網(wǎng)頁(yè)設(shè)計(jì)資源

?

下載附件： jQuery-Autocomplete-master