easyUI實現(xiàn)類似搜索框關鍵詞自動提示功能示例代碼

更新時間：2016年12月27日 10:42:12 作者：noWayBinding

本篇文章主要介紹了easyUI實現(xiàn)類似搜索框關鍵詞自動提示功能示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

在一個DataGrid里面，搜索行所在位置

實現(xiàn)的效果如下：

在搜索框中輸入部分列名關鍵字，即可匹配到行的位置。

EasyUI的SearchBox組件只提供了靜態(tài)搜索框，我們可以使用ComboBox來實現(xiàn)動態(tài)的自動關鍵匹配效果，并且不需要加載遠程數據。當前頁面的DataGrid的數據我們可以直接在本地獲取之。

代碼如下：

setp1、創(chuàng)建combobox

<div style="text-align: left;background-color: #E0ECFF;padding-left: 10px;padding-top: 5px;"> 
  <div id="searchField" style="width:250px"></div> 
</div>

step2、實現(xiàn)本地數據加載

 $("#searchField").combobox({ 
  loader: function(param,success,error){ 
    //獲取輸入的值 
    var q = param.q || ""; 
    //此處q的length代表輸入多少個字符后開始查詢 
    if(q.length <= 0) return false; 
    var rows = $('#fieldList').datagrid('getRows'); 
    var items = $.map(rows, function (item, index) { 
      //匹配條件，忽略大小寫 
      if(item.fieldName && (item.fieldName.toLowerCase().indexOf(q.toLowerCase()) != -1)){ 
        return { 
          "fieldName": item.fieldName 
        }; 
      } 
    }); 
    success(items); 
  }, 
  onBeforeLoad:function () { 
    //設置placeholder 
    $("input[class='textbox-text validatebox-text textbox-prompt']").attr("placeholder","輸入標注字段，定位所在行"); 
  }, 
  mode: 'remote', 
  textField:'fieldName', 
  valueField:'fieldName', 
  onSelect : function(record){ 
    var $filedList = $('#fieldList'); 
    var rows = $filedList.datagrid('getRows'); 
    if(rows && rows.length > 0){ 
      for(var r = 0 ; r < rows.length ; r++){ 
        if(rows[r].fieldName == record.fieldName){ 
          $filedList.datagrid('selectRow',r); 
          break; 
        } 
      } 
    } 
  } 
});

load是一個適配器，它將本地數據轉換成combobox所需的數據格式：

var rows = $('#fieldList').datagrid('getRows'); 
var items = $.map(rows, function (item, index) { 
  //匹配條件，忽略大小寫 
  if(item.fieldName && (item.fieldName.toLowerCase().indexOf(q.toLowerCase()) != -1)){ 
    return { 
      "fieldName": item.fieldName 
    }; 
  } 
});

首先我們通過datagrid的getRows方法獲取當前數據表的所有行，然后通過map轉換。

success(items);

到此就完成了數據的轉換

step3、實現(xiàn)行的選中

onSelect : function(record){ 
    var $filedList = $('#fieldList'); 
    var rows = $filedList.datagrid('getRows'); 
    if(rows && rows.length > 0){ 
      for(var r = 0 ; r < rows.length ; r++){ 
        if(rows[r].fieldName == record.fieldName){ 
          $filedList.datagrid('selectRow',r); 
          break; 
        } 
      } 
    } 
  }

在onSelect事件中，匹配所在行調用selectRow即可。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: