搜索插件AutoComplete（如何调用jQuery插件学习第四天）

       AutoComplete为自动填充，展示之意。jQuery中引入该插件后，用户在使用文本框搜索信息时，使用插件autoComplete方法绑定文本框，当在文本框中输入某个字符时，通过该方法中的指定的数据URL，返回相匹配的数据，自动显示在文本框下，提醒用户进行选择。

AutoComplete插件的使用：

（1）插件文件：

Js-8-4/jquery.autocomplete.js

Css-8-4/jquery.autocomplete.css

Images-8-4/indicator.gif

（2）下载地址：

http://jquery.bassistance.de/autocomplete/jquery.autocomplete.zip

（3）功能描述：

       在页面中创建一个文本框，用于输入查询信息。当在文本框中输入字符时，通过Autocomplete插件绑定设置好的数组信息，并与文本框中的字符匹配，将匹配后的结果序列化后展示在文本框的底部，为提供用户选项。

（4）实现代码：

<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Js-8-4/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="Css-8-4/jquery.autocomplete.css" />

<style type="text/css">...省略部分代码</style>

<script  type="text/javascript">
    $(function(){
        var arrUserName = [
            "张三","王小五","张子才","李四",
            "张大三","李大四","王五","刘明",
            "李小四","刘促明","李渊","张小三","王小明"
        ];
        $("#txtSearch").autocomplete(arrUserName,{
            minChars: 0 //双击空白文本框时显示全部提示数据
        });
    })
</script>

<div class="divFrame">
    <div class="divTitle">
        搜索用户
    </div>
    <div class="divContent">
        <span style="padding:0 5px 0 10px"><a href="#">新闻</a></span>
        <span style="padding:0 5px 0 5px"><b>用户</b></span>
        <div>
            <input type="text" id="txtSearch" class="txt" />
            <input type="button" id="btnSearch" value="查一下" class="btn" />
        </div>
    </div>
</div>

（5）代码分析：

       在页面的JS代码中，由于导入了AutoComplete插件，代码十分简单。首先自定义一个数组，用于与文本框中的数据相匹配，其代码如下：

var arrUserName = [
            "张三","王小五","张子才","李四",
            "张大三","李大四","王五","刘明",
            "李小四","刘促明","李渊","张小三","王小明"
        ];

       在实际的开发中，这部分数据可以与某个页面的URL绑定获取，同样也可以实现提示效果，在设定完数据源后，调用插件的autocomplete方法，完成数据与文本框间的绑定。其代码如下：

$("#txtSearch").autocomplete(arrUserName,{
    minChars:0 //双击空白文本框时显示全部提示数据
})

          AutoComplete插件的重要方法是autocomplete，其调用的语法格式如下：

$(文本框元素).autocomplete(urlOrDate,[option])

         其中，参加urlData表示绑定数据的路径或名称，可选项参数[option]为一个对象，其所设配置的属性名称如下所示：

$(文本框元素).autocomplete(urlOrDate,
    {
        minChars:      //自动完成前填入的最小字符，如果为0，双击空白文本时显示全部的提示数据信息
        max:           //显示的提示数据总条数
        autoFill:      //布尔值，表示是否选中时自动填充至文本框
        mustMatch:     //布尔值，表示是否匹配数据，设为True时，文本框中内容必须
                       //是匹配数据，如果不是，则清空文本框
        matchContains: //布尔值，表示是否包含匹配数据，设置为True时，文本
                       //框中内容只要被匹配数据包含则显示提示数据，否则不显示
        scrollHeight:  //设置匹配的数据滚动显示的高度
        formatItem:function(data,i,total){
            return"<I>"+data[0]+"</I>";
        },//格式化匹配数据显示的格式，如使用<I>标记
        formatMatch:function(data,i,total){
            return data[0];
        },//未格式化的源匹配数据
        formatMatch:function(data){
            return data[0];
        },//返回最终匹配的结果
    }
)

       在示例中，我们对JS部分的代码再次进行修改，增加两个功能：一是改变匹配数据显示的格式，另一个功能是单击“查一下”按钮后，显示所选中的匹配结果。

....省略部分代码
$("#txtSearch").autocomplete(arrUserName,{
    minChars: 0, //双击空白文档框时显示全部提示数据
     formatItem:function(data,i,total){
            return"<I>"+data[0]+"</I>";
        },//格式化匹配数据显示的格式，如使用<I>标记
        formatMatch:function(data,i,total){
            return data[0];
        },//未格式化的源匹配数据
        formatMatch:function(data){
            return data[0];
        },//返回最终匹配的结果
}).result(SearchCallback);//选中匹配数据中的某项数据时，调用插件的result方法
//自定义返回匹配结果函数
function SearchCallback(event,data,formatted) {
    $("#divData").html("您的选择是：" + (!data ? "空" : formatted));
}
//单击"查一下"按钮后，触发插件的search()方法
$("#btnSearch").click(function(){
    $("#txtSearch").search();
})
....省略部分代码

说明：AutoComplete插件中有两个重要的方法，一个是result(handler)方法，用于响应查看匹配的结果，其中参数handler为自定义的函数；另一个时search()方法，一般与"查询"按钮关联，调用绑定的result(handler)方法。