jquery+autocomplete+json 操作

//jquery 類庫

<script type="text/javascript" src="http://jquery.bassistance.de/autocomplete/lib/jquery.js"></script>

<script type='text/javascript' src='http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js'></script>

//css樣式

<link rel="stylesheet" type="text/css" href="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.css" />

//頁面需要一個文本框

搜尋：<input type="text" name="q" id="query_s" style="width:300px" />

//js腳本

     <script type="text/javascript">

         $().ready(function() {

             function format(mail) {

                 return mail.name

             }

             $("#query_s").focus().autocomplete('search.ashx, {

                 multiple: false,   //是否允許搜尋框追加

                 //             multipleSeparator: ',',  //搜尋框追加字尾格式 如：搜尋值1,搜尋值2

                 dataType: "json", //json類型

                 parse: function(data) {

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

                         return {

                             data: row,

                             value: row.name,

                             result: row.name

                         }

                     });

                 },

                 formatItem: function(item) {

                     return format(item);

                 }

             }).result(function(e, item) {

                 window.location.href = item.to; //選中後跳轉

   //$("#content").append("<p>selected " + format(item) + "</p>"); 指定一個div顯示資訊

             }

                );

         });

     </script>

 //背景搜尋頁 search.ashx

 string str = context.Request["q"]; //接收q這個參數，他是自動傳回搜尋框的value值

傳回json資料

 //json資料,我搜尋的是“8”

 [{name:"888",to:"user_test.aspx?TASKID=TaskExecID&year=2012"},{name:"892",to:"user_test.aspx?TASKID=TaskExecID&year=2012"}]