最新消息:文章中包含代码时,请遵守代码高亮规范!

搜索框关键词智能匹配【原创】

HTML+CSS Aimee 632浏览 0评论

在项目开发过程中,有时候需要监听输入框value值的变化,并在value值发生变化时执行操作,这里示例:当value值发生变化时,显示包含这个value的所有部分,其余隐藏。

查看示例前先了解下indexof方法:示例中seachvalue表示输入框的value值,stringObject表示需要检索的内容。返回-1是代表匹配失败,否则代表匹配成功。

//            indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
//            stringObject.indexOf(searchvalue,fromindex)
//            该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex时)。如果找到一个 searchvalue,
//            则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
//            注释:indexOf() 方法对大小写敏感!
//            注释:如果要检索的字符串值没有出现,则该方法返回 -1。

html代码:

 <div class="top-block">
       <a class="arrow-left" href="javascript:history.go(-1);"></a>//返回上一页按钮
       <div class="search-block">
           <input type="text" class="search-box" placeholder="请输入搜索名称">
           <input type="button" class="empty hide">//清空输入框内容
       </div>
   </div>

   <div class="content clearfix" id="content">
       <div class="w-top-city" style="width:100%;height:48px;"></div>

       <div class="city-name-block clearfix bgf no-city hide">
           <p class="search-empty bgf center f12 c3">抱歉,未找到相关信息,可尝试修改后重试</p>
       </div>

       <div class="city-name-block clearfix bgf">
           <p class="city-name f12 c3 pull-left">御膳豆黄</p>
           <p class="city-name f12 c3 pull-left">芝麻卷</p>
           <p class="city-name f12 c3 pull-left">金糕</p>      
       </div>
   </div>

 

js代码:

//            监听搜索框内容
            $(".search-box").bind('input propertychange', function() {
                searchCity();
            });
            
            function searchCity() {
                var searchCityName = $(".search-box").val();
                if (searchCityName == "") {
                    $(".empty").hide();
                    $('.no-city').hide();
                    $(".city-name").show();
                }
                else {
                    $(".empty").show();
                    var len = 0;
                    $(".city-name").each(function() {
                        var cityName = $(this).text();
                        if (cityName.indexOf(searchCityName) != -1) {
                            $('.no-city').hide();
                            $(this).show();
                            len=len+1;
                        }
                        else {
                            $(this).hide();
                        }
                    });
                    if(len == 0){
                        $('.no-city').show();
                    }
                }
            }

 

 

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/23168.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者aimee123的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!