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

　　文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作，是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件，帮助你在网站中轻松添加输入框的自动完成和自动提示功能。

您可能感兴趣的相关文章

• 12款很棒的浏览器兼容性测试工具推荐
• 10套精美的免费网站后台管理系统模板
• 开发者必备的8个最佳云端集成开发环境
• 十款精心挑选的在线CSS3代码生成工具
• 推荐8款优秀的免费 Web 安全测试工具

 

　　在这篇文章中，我们使用  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);
}
});

您可能感兴趣的相关文章

• 60款非常酷的 jQuery 幻灯片演示和下载
• 15个款优秀的 jQuery 图片特效插件推荐
• 几款优秀的 jQuery Ajax 分页插件和教程
• Web开发者必备的20款超赞 jQuery 插件
• 分享23款美轮美奂的 jQuery 图片特效插件

 　　

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

编译来源： 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

hide

本文链接