easyui-textbox绑定keyup事件实现搜索框值实时获取

墨蓝 2023-10-18 08:57 61阅读 0赞

最近工作中遇到一个需求，需要做一个搜索框，有提示语提示用户输入用户名进行搜索，一开始考虑使用easyui的searchbox来实现搜索框，但是需求中还要根据搜索框中的值来进行实时判断，当搜索框中的值重新变化为空时，隐藏搜索结果列表，展示全部用户树。

searchbox不支持keyup、oninput之类的事件，所以改写成input输入框。

js代码

$(function(){
       $("#search").keyup(function(){
           var searchVal=$("#search").val();
           if(searchVal==""){
             $("#userTree").show();//展示用户树
             $("#searchUser").hide();//隐藏搜索列表
          }
       });
    })

但是此时搜索框没有提示语，于是改造搜索框：

改造之后的搜索框有了提示语：请输入用户名搜索...，这样用户体验更好。

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

此时，满足所有需求：搜索框有响应提示语，默认搜索框下面显示用户树，当进行搜索时隐藏用户树，显示搜索结果列表，当搜索框值重新为空时，隐藏搜索结果列表，重新展示用户树。

搜索框：

js代码：