jQuery.AutoComplete 基于 jQuery 的自动补全插件

发布于 2019-08-04 12:20:44 字数 1994 浏览 2041 评论 0

jQuery.AutoComplete 是一个基于 jQuery 的自动补全插件。借助于 jQuery 优秀的跨浏览器特性,可以兼容 Chrome/IE/Firefox/Opera/Safari 等多种浏览器。

特点

  • 支持补全列表的宽度设定。
  • 支持补全列表的最大高度设定。
  • 支持补全列表的行数限制。
  • 支持补全列表的显示位置及方向的设定。
  • 支持自定义匹配规则。
  • 支持匹配文本的渲染。
  • 支持自定义匹配文本的渲染样式。
  • 支持补全列表的样式设定。
  • 支持自定义补全列表项的创建。
  • 支持异步处理。
  • 支持错误调试。
  • 支持jQuery1.7.1+

快速入门

确保jQuery已经引入在您的网页中,还应该引入autocomplete.js和autocomplete.css文件在头部标签内。

<head>
    <link rel="stylesheet" type="text/css" href="css/autocomplete.min.css"/>
    <script src="js/autocomplete.min.js"></script>
</head>

至少填写提示和呼叫选定的HTML元素的插件,添加一个autocomplete编程:

var words = ['boat', 'dog', 'drink', 'elephant', 'fruit', 'London'];
$(document).ready(function(){
    $('#yourElement').autocomplete({
        hints: words
    });
});

这个插件的接口 autoComplete 可以接收一个数组作为参数以提供数据。

可选参数

  • hints: 用于显示提示的单词数组。
  • placeholder:搜索输入占位符(默认:“search”)。
  • width:文本框的宽度
  • height:文本框的高度
  • showButton:显示搜索按钮(默认值:true)。
  • buttonText: 按钮文本(默认值:search)。
  • onSubmit:函数处理程序调用输入提交。
  • onBlur:函数处理程序调用输入丢失的焦点。

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文