Jquery AutoComplete实现搜索自动完成

浏览数：56 / 时间：2015年06月09日

AutoComplete控件就是指用户在文本框输入前几个字母或是汉字的时候，该控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户，供用户选择，提供方便。

例子：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>jQuery UI Autocomplete - Custom data and display</title>
 6   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
 7   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 8   <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
 9   <link rel="stylesheet" href="/resources/demos/style.css">
10   <style>
11   #project-label {
12     display: block;
13     font-weight: bold;
14     margin-bottom: 1em;
15   }
16   #project-icon {
17     float: left;
18     height: 32px;
19     width: 32px;
20   }
21   #project-description {
22     margin: 0;
23     padding: 0;
24   }
25   </style>
26   <script>
27   $(function() {
28     var projects = [
29       {
30         value: "jquery",
31         label: "jQuery",
32         desc: "the write less, do more, JavaScript library",
33         icon: "jquery_32x32.png"
34       },
35       {
36         value: "jquery-ui",
37         label: "jQuery UI",
38         desc: "the official user interface library for jQuery",
39         icon: "jqueryui_32x32.png"
40       },
41       {
42         value: "sizzlejs",
43         label: "Sizzle JS",
44         desc: "a pure-JavaScript CSS selector engine",
45         icon: "sizzlejs_32x32.png"
46       }
47     ];
48  
49     $( "#project" ).autocomplete({
50       minLength: 0,
51       source: projects,
52       focus: function( event, ui ) {
53         $( "#project" ).val( ui.item.label );
54         return false;
55       },
56       select: function( event, ui ) {
57         $( "#project" ).val( ui.item.label );
58         $( "#project-id" ).val( ui.item.value );
59         $( "#project-description" ).html( ui.item.desc );
60         $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
61  
62         return false;
63       }
64     })
65     .autocomplete( "instance" )._renderItem = function( ul, item ) {
66       return $( "<li>" )
67         .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
68         .appendTo( ul );
69     };
70   });
71   </script>
72 </head>
73 <body>
74  
75 <div id="project-label">Select a project (type "j" for a start):</div>
76 <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" >
77 <input id="project">
78 <input type="hidden" id="project-id">
79 <p id="project-description"></p>
80  
81  
82 </body>
83 </html>