EasyUI 經過 Combobox 實現 AutoComplete 效果

朋友在作一個web程序，用的EasyUI框架，讓我幫忙實現一個自動提示功能。因爲以前我也沒用過EasyUI框架，就想到了jQueryUI有 AutoComplete 插件，就想直接拿過來用。 但當我將jQueryUI集成到項目中時，發現 AutoComplete 插件沒有效果。百度發現jQueryUI的AutoComplete 插件和 EasyUI 有衝突，用不了...

 

既然不行就只能另行找辦法了，看到別人回覆中提到 EasyUI 框架自帶的 Combobox 就能夠實現自動提示功能。因而就去官網看了相關文檔，最終解決。具體代碼以下：

 

Html （記得加 class="easyui-combox"）

<input id="textFilter" name="textFilter" class="easyui-combox" />

 

Javascript

$('#textFilter').combobox({
      mode: 'remote',  //模式： 遠程獲取數據
      url: '/Service/EasyUiService.ashx?Method=AutoComplete_ZXJZ',  //遠程數據請求地址
      valueField: 'val', 　　//value對應的屬性字段
      textField: 'txt'　　　 //text對應的屬性字段
 });

 

當是從遠程獲取數據的時候，要將 mode 設置爲 remote。 這樣當你輸入框的值改變時就會自動去訪問 url 請求數據。 而且會自動帶一個參數名爲 q 的參數， q 的值就是你輸入框的值。 若是沒有設置數據訪問模式，默認爲 POST 請求。瀏覽器控制檯截圖以下：

 

 

C# （返回 Json 格式數據）

public void AutoComplete_ZXJZ()
{
     string search = Request["q"];
     string sql = @"select top 10 txt,val from Fund where code like '%" + search + "%' or name like '%" + search + "%' order by code";

     DataTable dt = conn.GetDataTable(sql);
     JsonConvert<object> jc = new JsonConvert<object>();
     Response.Write(jc.ToDataGrid(dt));
}

 

由於前端會將輸入的值傳過來，參數名爲 q ， 因此後臺要接收參數q 。 既（string search = Request["q"]）。