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();//隐藏搜索列表
      }
   });
})