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

?

在這篇文章中，我們使用? jQuery ?實現智能輸入框光標的位置。它不需要圖像，是使用純粹的? CSS3 ?實現的，而且實時、準確，這意味著你在添加或刪除文本的時候它會自動適應。使用事件代理機制實現，所以不用擔心性能問題。

下載源碼 ? ?? 在線演示

?

主要參數介紹：

• serviceUrl：Ajax 請求的 URL；
• lookup：本地數據數組；
• minChars：觸發自動提示的最小字符數；
• params：請求的附加參數；
• formatResult：返回結果的格式化函數；
• autoSelectFirst：是否自動選中第一個；
• onSearchStart：搜索開始的回調函數；
• onSearchComplete：搜索完成的回調函數；
• tabDisabled：是否禁用 Tab 鍵；

?

使用方法

這個差距的使用非常簡單，下面是 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);
    }
});
    

?

?

本文鏈接： 優秀 jQuery 文本輸入框自動完成 & 自動提示插件

編譯來源： 夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

?

下載附件： jQuery-Autocomplete-master