转（Jquery AutoComplete的使用方法实例）

dikar · 发表于 2013-2-8 00:27:09

为了实现一个花哨的自动搜索补全功能，故需要写js了，以前使用YUI的，现在希望找个轻量级的了，找到了jquery，go了很久才找到了我想要的，故在此记录下。

官方地址：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

转自：http://www.cnblogs.com/hyl8218/archive/2010/03/19/1688828.html

jQuery的Autocomplete（自动完成、自动填充）插件有不少，但比较下来我感觉，还是bassistance.de的JQuery Autocomplete plugin比较强大，我们就来写一些代码感受一下。

jquery-autocomplete配置：
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
<link rel="Stylesheet" href="/js/jquery.autocomplete.css" />

首先是一个最简单的Autocomplete（自动完成）代码片段：

<div class="cnblogs_code"> 1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3     <title>AutoComplate</title>
4     <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
5     <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
6     <link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
7     <script type="text/javascript">
8         $(function() {
9             var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
10
11             $('#keyword').autocomplete(data).result(function(event, data, formatted) {
12                 alert(data);
13             });
14         });
15     </script>
16 </head>
17 <body>
18     <form id="form1" runat="server">
19     <div>
20         <input id="keyword" />
21         <input id="getValue" value="GetValue" type="button" />
22     </div>
23     </form>
24 </body>
25 </html>

		自动登录	找回密码
密码			立即注册

转（Jquery AutoComplete的使用方法实例）

浏览过的版块