easyui combobox自動搜尋提示功能
阿新 • • 發佈：2018-11-10
easyui combobox自動搜尋提示功能
1、前端程式碼：
<input class="easyui-combobox" id="userId" style="width:200px;"></input> <script> $('#userId').combobox({ prompt:'請輸入要查詢的使用者，按空格重新整理', //提示資訊 //required:true, //是否必填 mode:'remote', //動態去伺服器端拿資料；而mode:'local'是取本地資料的也就是javascirpt(記憶體)中的資料 url:'/user/info/get', //請求資料路徑 editable:true, //可編輯 hasDownArrow:false, //下拉麵板不關閉 valueField: "id", //陣列的鍵索引 textField: "name", //陣列的值索引 onBeforeLoad: function(param){ //onBeforeLoad：在請求載入資料之前觸發，返回 false 則取消載入動作，為true的話則重新載入資料。 console.log("------ "+param.q+" ------"); //param.q ：combobox框輸入的引數，請求方式POST if(param == null || param.q == null || param.q.replace(/ /g, '') == ''){ var value = $(this).combobox('getValue'); if(value){ //不為空的時候才傳關鍵字到後臺，模糊查詢資料到前臺 param.q = value; return true; } return false; } } }); </script>
2、PHP程式碼（yaf）：
public function getuserAction(){
$keyword = trim($_POST['q']); //POST接收要搜尋的關鍵字
$mUser = new userModel(); //例項化模型
$info = $mUser->getList([['name', 'like', '%'.$keyword.'%']], 'id,name');
die(json_encode($info));
}3、返回的資料格式：
/** * @todo json資料示例 */ public function dataAction(){ $arr = [ ['id'=>1, 'name'=>'名字1'], ['id'=>2, 'name'=>'名字2'], ['id'=>2, 'name'=>'名字3'], ['id'=>2, 'name'=>'名字4'], ]; echo json_encode($arr).'<br/>'; echo json_encode($arr, JSON_UNESCAPED_UNICODE); //中文不轉義 die(); }
4、json字串頁面列印：
[{"id":1,"name":"\u540d\u5b571"},{"id":2,"name":"\u540d\u5b572"},{"id":2,"name":"\u540d\u5b573"},{"id":2,"name":"\u540d\u5b574"}]
[{"id":1,"name":"名字1"},{"id":2,"name":"名字2"},{"id":2,"name":"名字3"},{"id":2,"name":"名字4"}]