EasyUi模糊匹配搜尋框combobox
現在專案當中很多已經應用了Jquery-easyUi這個介面框架了,所以,學習一點easyUI的常用工具就顯得很重要了,現在介紹的就是我在專案中用到的easyUi的模糊匹配組合框combobox.
combobox這個工具可以在使用者輸入一點前面的資料就會快速的查詢出符合當前查詢資料的所有資料。
這個工具只要在引入easyUI jar包的Jsp頁面中引用就可以了。
用法:
1、 需要引入class=" easyui-combobox”
2、 引數設定需要在data-options中設定
3、 屬性引數配置:
valueField:基礎資料值名稱繫結到Combobox(提交值)
textField:基礎資料的欄位名稱繫結的Combobox(顯示值)
mode:定義當文字改變時如何載入列表資料,當設定為remote模式下,什麼型別的使用者將被髮送http請求引數名為'q'的伺服器,以獲取新的資料。
url:從遠端URL來載入列表資料
method:http方法檢索列表資料
data:列表中被載入的資料
filter:定義如何過濾本地資料“模式”設定為'local'
formatter:定義如何呈現行
loader:定義如何從遠端伺服器載入資料
具體程式碼如下:
<script type="text/javascript">
$(document).ready(function(){
//自動搜尋
$('#changeName1').combobox({
mode:'remote' ,
url:'ChangeSoftAction!searchName.do' ,
valueField:'codeTypeName' ,
textField:'codeTypeName' ,
delay:500
});
});
</script>
<input type="text" id="changeName1" name="changeSoft.csName" size="24" maxlength="50" class="easyui-combobox" data-options="required:false,validType:'special'"/>