autocomplete的使用

autocomplete使用分为本地调用方法和读取远程读取数据源的方法

（1）本地调用方法

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

<link href="Scripts/jquery.autocomplete.css" rel="stylesheet" type="text/css" />    

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

<script 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 ()  

　　　　　　{

                 $('#txt').autocomplete(emails, {

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

                     minChars: 1,    //自动完成激活之前填入的最小字符,如果为0，则双击时显示全部

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

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

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

                     autoFill: false,    //自动填充

                     formatItem: function (row, i, max)

                     {

                         return  row.name;

                     },

                     formatMatch: function (row, i, max)

                     {

                         return row.name;

                     },

                     formatResult: function (row)

                     {

                         return row.name;

                     }

                 });

             });

    </script>

    <input type="text" id="txt" />

 

 

（2）远程调用数据源的方法

后台.js

  ViewState["data"]="[{ name: \"Peter Pan\"},{ name: \"Molly\"},{ name: \"Forneria Marconi\"},{ name: \"Don Corleone\"}]";

 

前台

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

<link href="Scripts/jquery.autocomplete.css" rel="stylesheet" type="text/css" />    

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

<script type="text/javascript">               

             $(function ()  

　　　　　　{

                 var data = '<%= ViewState["data"] %>';

                 var da = eval('(' + data + ')');

                 $('#txt').autocomplete(da, {

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

                     minChars: 1,    //自动完成激活之前填入的最小字符,如果为0，则双击时显示全部

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

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

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

                     autoFill: false,    //自动填充

                     formatItem: function (row, i, max)

                     {

                         return  row.name;

                     },

                     formatMatch: function (row, i, max)

                     {

                         return row.name;

                     },

                     formatResult: function (row)

                     {

                         return row.name;

                     }

                 });

             });

    </script>

    <input type="text" id="txt" />

转载于:https://www.cnblogs.com/cyit/p/4319309.html