[JQ权威指南]搜索插件AutoComplete

最新推荐文章于 2023-07-26 09:40:57 发布

厦门德仔

最新推荐文章于 2023-07-26 09:40:57 发布

阅读量613

点赞数

分类专栏： # JQuery

本文链接：https://blog.csdn.net/david_520042/article/details/53095587

版权

JQuery 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

(1)AtuoComplete 为自动填充、展示之意。JQuery中引入该插件之后，用户在使用文本框搜索信息时，使用插件中的autocomplete方法绑定文本框，当在文本框中输入某个字符时，通过该方法中的指定的数据URL，返回相匹配的数据，自动显示在文本框下，提醒用户进行选择。
(2)功能描述：在页面中创建一个文本框，用于输入查询信息。当在文本框中输入字符时，通过autocompelete插件绑定设置好的数组信息，并与文本框中的字符匹配，江匹配后的结果序列化后展示在文本框的底部，为提供用户选择。
(3)实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>autocomplete插件</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
    <script type="text/javascript" 
            src="Js-7-4/jquery.autocomplete.js">
    </script>
    <link rel="stylesheet" type="text/css" 
            href="Css-7-4/jquery.autocomplete.css" />
    <style type="text/css">
           body{font-size:13px}
           .divFrame{width:260px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee;font-weight:bold}
           .divFrame .divContent{padding:8px;line-height:1.6em}
           .divFrame .divBtn,#divData{padding-bottom:8px;padding-left:8px}
           .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}
           .btn {border:#666 1px solid;padding:2px;width:80px;margin-bottom:3px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style>
    <script type="text/javascript">
        $(function() {
            var arrUserName = ["张三", "王小五", "张才子",
            "李四", "张大三", "李大四", "王五", "刘明",
            "李小四", "刘促明", "李渊", "张小三", "王小明"];
            $("#txtSearch").autocomplete(arrUserName, {
                minChars: 0, //双击空白文本框时显示全部提示数据
                formatItem: function(data, i, total) {
                return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
                },
                formatMatch: function(data, i, total) {
                    return data[0];
                },
                formatResult: function(data) {
                    return data[0];
                }
            }).result(SearchCallback); //选中匹配数据中的某项数据时，调用插件的result()方法
            //自定义返回匹配结果函数
            function SearchCallback(event, data, formatted) {
                $("#divData").html("您的选择是：" + (!data ? "空" : formatted));
            }
            //点击"查一下"按钮后，触发插件的search()方法
            $("#btnSearch").click(function() {
                $("#txtSearch").search();
            });
        })
    </script>
</head>
<body>
    <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 id="divData"></div>
     </div>
</body>
</html>

(4)页面显示
这里写图片描述

厦门德仔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
[JQ权威指南]搜索插件AutoComplete

(1)AtuoComplete 为自动填充、展示之意。JQuery中引入该插件之后，用户在使用文本框搜索信息时，使用插件中的autocomplete方法绑定文本框，当在文本框中输入某个字符时，通过该方法中的指定的数据URL，返回相匹配的数据，自动显示在文本框下，提醒用户进行选择。(2)功能描述：在页面中创建一个文本框，用于输入查询信息。当在文本框中输入字符时，通过autocompelete插件绑定
复制链接

扫一扫