最近工作中遇到一個需求，需要做一個搜尋框，有提示語提示使用者輸入使用者名稱進行搜尋，一開始考慮使用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();//隱藏搜尋列表
      }
   });
})