优秀的 jQuery 文本输入框插件

       文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作，是非常好的产品使用体验。这里向大家推荐一款优秀的 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 文本输入框插件】相关文章

1. 优秀的 jQuery 文本输入框插件

2. 优秀的 jQuery 文本输入框插件

3. 使用 CSS3 实现动感迷人的输入框 – Fancy Input

4. 优秀的响应式 jQuery 滑块插件

5. 15个款优秀的 jQuery 图片特效插件

6. 10款web前端优秀的jQuery特效插件

7. 精心挑选6款优秀的 jQuery Tooltip 插件

8. 优秀的响应式 jQuery 滑块插件

9. 令人印象深刻的 jQuery 模态框插件 – iLightBox

10. 更好用的 jQuery 下拉选择框插件

本文来源：https://www.51html5.com/a1227.html