Jquery实现自动补全功能

原创

于 2016-01-18 17:16:06 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#自动补全-jquer

这篇博客介绍了如何利用jQuery实现自动补全功能。首先提供了包含详细解释的示例代码，可以直接复制使用。虽然初始示例使用的是静态数据，但接着说明了如何通过Ajax动态从数据库获取数据。通过调用服务器上的model并使用Ajax，实现了将实时数据填充到页面的自动补全框中。

   今天因为公司全去搞活动了，所以在网上看了一会儿jquery，在这里详细介绍一下基于jquery的autoComplete的实现。
     首先，向大家看下自己实现的最简单的结果：
![简单效果](https://img-blog.youkuaiyun.com/20160118171503783)
      估计和很多新手一样，一开始没有明白怎么弄，不过不要紧张，慢慢来，so easy!
      第一:去下载一个jquery.autocomplete.js插件：[官网地址](http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/)
      第二:开始写一个.html;
![前面要引入的一些外部.js和.css](https://img-blog.youkuaiyun.com/20160118172539658)
      在body里面只要一个输入框即可:

<body>
    <input type="text" id="singleBirdRemote" style="width: 200px;height: 30px;"/>
</body>

接下来就是全部是jquery了。
直接附上代码，里面有详细的解释，直接copy即可使用。

 var websites = [
        "Google","NetEase", "Sohu", "Sina", "Sogou",

最低0.47元/天解锁文章