1. 程式人生 > >easyui-textbox繫結keyup事件實現搜尋框值實時獲取

easyui-textbox繫結keyup事件實現搜尋框值實時獲取

   最近工作中遇到一個需求,需要做一個搜尋框,有提示語提示使用者輸入使用者名稱進行搜尋,一開始考慮使用easyui的searchbox來實現搜尋框,但是需求中還要根據搜尋框中的值來進行實時判斷,當搜尋框中的值重新變化為空時,隱藏搜尋結果列表,展示全部使用者樹。

   searchbox不支援keyup、oninput之類的事件,所以改寫成input輸入框。

<input id='search' style='width=150px;'></input>

   js程式碼

$(function(){
   $("#search").keyup(function(){
       var searchVal=$("#search").val();
       if(searchVal==""){
         $("#userTree").show();//展示使用者樹
         $("#searchUser").hide();//隱藏搜尋列表
      }
   });
})

但是此時搜尋框沒有提示語,於是改造搜尋框:

<input id='search' style='width=150px;' type='text' class='easyui-textbox' data-options="prompt:'請輸入使用者名稱搜尋...'"></input>

改造之後的搜尋框有了提示語:請輸入使用者名稱搜尋...,這樣使用者體驗更好。

但是此時js中的keyup事件不生效,查了資料發現textbox不支援繫結keyup事件,可以通過下面的方式進行繫結keyup事件

$(function(){
   $("#search").textbox('textbox').bind('keyup',function(){
       var searchVal=$("#search").val();
       if(searchVal==""){
         $("#userTree").show();//展示使用者樹
         $("#searchUser").hide();//隱藏搜尋列表
      }
   });
})

這個時候能顯示提示語,也能繫結keyup事件,但是頁面就是得不到想要的結果,除錯發現每次keyup事件獲取的值並不是當前實時輸入的值,而是上一次輸入的值,再次查資料後修改獲取搜尋框值的程式碼:

$(function(){
   $("#search").textbox('textbox').bind('keyup',function(){
       var searchVal=$("#search").next().children().val();
       if(searchVal==""){
         $("#userTree").show();//展示使用者樹
         $("#searchUser").hide();//隱藏搜尋列表
      }
   });
})

此時,滿足所有需求:搜尋框有響應提示語,預設搜尋框下面顯示使用者樹,當進行搜尋時隱藏使用者樹,顯示搜尋結果列表,當搜尋框值重新為空時,隱藏搜尋結果列表,重新展示使用者樹。

搜尋框:

<input id='search' style='width=150px;' type='text' class='easyui-textbox' data-options="prompt:'請輸入使用者名稱搜尋...'"></input>

js程式碼:

$(function(){
   $("#search").textbox('textbox').bind('keyup',function(){
       var searchVal=$("#search").next().children().val();
       if(searchVal==""){
         $("#userTree").show();//展示使用者樹
         $("#searchUser").hide();//隱藏搜尋列表
      }
   });
})