AutoComplete

Posted 2020-07-11 lilyshy

AutoComplete处理

aspx页面

需要引用的文件：

    <link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.autocomplete.js"></script>

script：

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

$().ready(function() { 

$.ajax({         contentType: "application/json",        

url: "AutoComplete.ashx",        

dataType: "json",        

success: function (msg) {                

$("#reg_XIAOQU").autocomplete(msg, {                    

minChars: 1,                    //最少输入字条                   

  max: 40,                    

autoFill: false,                //是否选多个,用","分开                   

  mustMatch: false,               //是否全匹配, 如数据中没有此数据,将无法输入                    

matchContains: true,            //是否全文搜索,否则只是前面作为标准                    

scrollHeight: 220,                    

width: 200,                    

multiple: false,                    

formatItem: function (row, i, max) {                    //显示格式                        

return "<span>" + row.alladress + "</span>";                     },                    

formatMatch: function (row, i, max) {               //以什么数据作为搜索关键词,可包括中文,                        

return row.alladress;                     },                    

formatResult: function (row) {                      //返回结果                       

  return row.alladress;                     }               

  }).result(function (event, data, formatted) {                   

  alert(data.alladress);                     //根据最终返回的数据做处理              

   });         }     });

});    

</script>

后台代码处理页AutoComplete.ashx：

using System;

using System.Web;

using System.Data;

using System.Collections.Generic;

using System.Web.Script.Serialization;

public class AutoComplete : IHttpHandler {        

public void ProcessRequest (HttpContext context) {        

context.Response.ContentType = "text/plain";        

ServiceWS myWS = new ServiceWS();     //实例化数据操作类        

string sql = "Select alladress From LIVINGAREA";        

DataSet ds = myWS.GetDsFromSql(sql);        

if (ds.Tables[0]!=null)          {            

string data = DbHelper.DataTable2Json(ds.Tables[0]);             

context.Response.Write(data);             

context.Response.Flush();            

  context.Response.End();         

}     

}      

public bool IsReusable {        

get {             return false;         }    

}

}

效果图：