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" />