调起手机软键盘点击搜索按键后触发搜索功能 --- WeUi+在线演示

首先在html中的form表单中加上action=“#” js通过submit()触发即可,具体代码如下:

HTML:

<div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form" action="#">
                <div class="weui-search-bar__box">
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
        </div>

JS:

//点击搜索之后再次搜索
    $("form").submit(function(){
        var keyword = $("#searchInput").val();
        console.log(keyword);
        $.ajax({
            url:"/index.php/App/search/searchUser",
               type:"post",
             dataType:"json",
               async:true,
               data:{keyword:keyword},
              success:function(data){
                   console.log(data);
                   //数据预处理
                   formateData(data.value.list,"username");
                   var htmlUsers = template("usersId",data);
                   $(".content .users").html(htmlUsers);
                   if(data.value.count==0){
                       $(".icon-box").css({
                           "display":"block"
                       });
                       $(".weui-cells__title").css({
                           "display":"none"
                       })
                   }else{
                       $(".icon-box").css({
                           "display":"none"
                       });
                       $(".weui-cells__title").css({
                           "display":"block"
                       })
                   };
                   //数据预处理方法
                   function formateData(data,key){
                    for(var i=0;i<data.length;i++){
                        var thisReg = eval("/"+keyword+"/g");
                        data[i][key] = data[i][key].replace(thisReg,"<span class='text-red'>"+keyword+"</span>")
                    };
                   }
               }
        })    
        return false;
    });

转载:https://blog.csdn.net/wh_xmy/article/details/56291209

posted @ 2021-04-01 11:26  搬砖小伙子  阅读(622)  评论(0)    收藏  举报