优秀的 jQuery 文本输入框自动完成 & 自动提示插件-阿里云开发者社区

优秀的 jQuery 文本输入框自动完成 & 自动提示插件

2013-01-28 1024

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