项目中有时会用到自动补全查询,就像Google搜索框、淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能。

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>无标题页</title>

 <link rel="Stylesheet" href="jquery.autocomplete.css" />

 <script type="text/javascript" src="Jquery-autocomplete.js"></script>

 <script type="text/javascript"  src="jquery-1.4.1-vsdoc.js"></script>

<script type="text/javascript" src="autocompelte/jquery.autocomplete-min.js"></script>

<%--

//$(document).ready(function()

//{

//$("#<%=txtUser.ClientID %>").autocomplete("GetCode.aspx",{

// width: 155,

//            selectFirst: true,

//            autoFill: true,

//            minChars: 0,

//            scroll: true,

//            mustMatch: true

//           

//            });

//});--%>

<script  language="javascript" type="text/javascript">

  var emails = [

            { name: "Peter Pan", to: "peter@pan.de" },

            { name: "Molly", to: "molly@yahoo.com" },

            { name: "Forneria Marconi", to: "live@japan.jp" },

            { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },

            { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },

            { name: "Don Corleone", to: "don@vegas.com" },

            { name: "Mc Chick", to: "info@donalds.org" },

            { name: "Donnie Darko", to: "dd@timeshift.info" },

            { name: "Quake The Net", to: "webmaster@quakenet.org" },

            { name: "Dr. Write", to: "write@writable.com" },

            { name: "GG Bond", to: "Bond@qq.com" },

            { name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }

        ];

 

            $(function() {

                $('#keyword').autocomplete("GetCode.aspx", {

//                    max: 12,    //列表里的条目数

//                    minChars: 0,    //自动完成激活之前填入的最小字符

//                    width: 400,     //提示的宽度,溢出隐藏

//                    scrollHeight: 300,   //提示的高度,溢出显示滚动条

//                    matchContains: true,    //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示

//                    autoFill: false    //自动填充

////                    formatItem: function(row, i, max) {

////                        return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';

////                    },

////                    formatMatch: function(row, i, max) {

////                        return row.name + row.to;

////                    },

////                    formatResult: function(row) {

////                        return row.to;

////                    }

//                }).result(function(event, row, formatted) {

//                    alert(row.to);

//                });

//            });

                        minChars: 0,  

                        max:10,  

                        width: 400, 

                        matchCase:false,//不区分大小写 

                      //  matchContains :true, 

                       // autoFill: false, 

                        scroll: false, 

                        dataType: 'json',     

                        scrollHeight: 500, 

                       //此处为传递参数 

                        extraParams:{v:function() { return $('#keyword').val();}}, 

                      //需要把data转换成json数据格式                       

                        parse: function(data) { 

                           return $.map(eval(data), function(row) { 

                               return { 

                                data: row, 

                                value: row.Guage,    //此处无需把全部列列出来,只是两个关键列 

                                result: row.Matcode  

                              } 

                        }); 

                 }, 

                formatItem: function(data, i, total) {   

                   return "<table><tr><td align='left'>" + data.Guage + "</td><td align='right'> " + data.Unit + " </td></tr></table>";  

                     

                 }, 

                formatMatch: function(data, i, total) { 

                            return data.Guage; 

                 }, 

                formatResult: function(data, value) {  

                            return data.Guage;    

                 } 

                }).result(function(event, data, formatted) { //回调 

                         $('#keyword').val(data.Matcode);   //不知为何自动返回值后总是加了个“,”,所以改成后赋值 

                         $("#content").val(data.Guage+data.Unit); 

            }); 

  });   

                </script>

 

</head>

<body>

    <form id="form1" runat="server">

    <div>

     <input id="keyword" />

      <input id="getValue" value="GetValue" type="button" />

<%--搜索:<asp:TextBox ID="txtUser" runat="server"></asp:TextBox>--%>

        </div>

    </form>

</body>

</html>

posted on 2015-09-19 12:21  aileen-1  阅读(235)  评论(0编辑  收藏  举报