2-6 搜索插件——autocomplete
本节编程练习不计算学习进度，请电脑登录imooc.com操作

搜索插件——autocomplete

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：

$(textbox).autocomplete(urlData,[options]);

其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象。

例如，当用户在文本框输入内容时，调用搜索插件的autocomplete()方法返回与输入内容相匹配的字符串数据，显示在文本框下，提示选择，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当文本框与搜索插件相绑定后，输入任意字符时，都将返回与之相匹配的字符串，提示用户选择，文本框在空白双击时，显示全部提示信息。

任务

我来试试，亲自感受一下搜索插件与文本框绑定使用的过程

  1. 在下列代码的第27行，通过调用autocomplete()方法将文本框绑定搜索插件，当文本框输入字符时，自动匹配与字符相近的内容，并显示在文本框底部。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>搜索插件</title>
  5.         <link href="http://www.imooc.com/data/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
  6.         <link href="style.css" rel="stylesheet" type="text/css" />
  7.         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
  8.         <script src="http://www.imooc.com/data/jquery.autocomplete.js" type="text/javascript"></script>
  9.     </head>
  10.  
  11.     <body>
  12.         <div id="divtest">
  13.             <div class="title">
  14.                 <span class="fl">搜索插件</span>
  15.             </div>
  16.             <div class="content">
  17.                 <span class="fl">用户名</span><br />
  18.                 <input id="txtSearch" name="txtSearch" type="text" />
  19.                 <div class="tip">
  20.                 </div>
  21.             </div>
  22.         </div>
  23.  
  24.         <script type="text/javascript">
  25.             $(function () {
  26.                 var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];
  27.                 ?{
  28.                     minChars: 0, //双击空白文本框时显示全部提示数据
  29.                     formatItem: function (data, i, total) {
  30.                         return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
  31.                     },
  32.                     formatMatch: function (data, i, total) {
  33.                         return data[0];
  34.                     },
  35.                     formatResult: function (data) {
  36.                         return data[0];
  37.                     }
  38.                 }).result(SearchCallback); 
  39.                 function SearchCallback(event, data, formatted) {
  40.                     $(".tip").show().html("您的选择是：" + (!data ? "空" : formatted));
  41.                 }
  42.             });
  43.         </script>
  44.     </body>
  45. </html>
  1. #divtest
  2. {
  3.     width: 282px;
  4. }
  5. #divtest .title
  6. {
  7.     padding: 8px;
  8.     background-color: Blue;
  9.     color: #fff;
  10.     height: 23px;
  11.     line-height: 23px;
  12.     font-size: 15px;
  13.     font-weight: bold;
  14. }
  15. #divtest .content
  16. {
  17.     padding: 8px 0px;
  18.     background-color: #fff;
  19.     font-size: 13px;
  20. }
  21. #divtest .content .tip
  22. {
  23.     text-align:center;
  24.     border:solid 1px #ccc;
  25.     background-color:#eee;
  26.     margin:20px 0px;
  27.     padding:8px;
  28.     display:none;
  29. }
  30. .fl
  31. {
  32.     float: left;
  33. }
  34. .fr
  35. {
  36.     float: right;
  37. }
下一节