JS搜索商品(跟外卖app店内搜索商品一样) ,keyup函数和click函数调用

HTML: input输入框:

<input id="sea"  type="text">

JS:

//点击搜索商品
 $('#mys').click(function () {
      $('#sea').keyup(); //调用keyup函数,click就不用再多写一遍keyup中的代码
 });

// 兼容IOS系统写法(有时候ios键盘跟安卓不同,需要再加这句)
$('#sea').bind('input propertychange',function () {
     $('#sea').keyup();
});
//输入即刻搜索商品 $('#sea').keyup(function () { //这里写输入后的处理的JS代码
    var $sea = $.trim($('#sea').val());

    

  $('.main-container .container ul li p.am-text-lg').each(function () {

                  $itemV = this.innerHTML;
                  $itemV = $itemV.replace(/</?font>/g,''); //去掉font标签, IOS手机即时搜索的时候如果有标签存在就不行

                  if ($itemV.indexOf($sea) != -1) {
                      $('#container2').css('display', 'none');
                      is_has = 1;
                      var $l = $sea.length;
                      // console.log($l);
                      var $c = $itemV.substr($itemV.indexOf($sea),$l);
                      this.innerHTML = $itemV;

                      $(this).closest('.menu-list').css('display','block');
                      // console.log($(this).closest('.main-container'));
                      $(this).closest('.main-container').siblings().css('display','none');
                      $(this).closest('.main-container').css('width','100%');

                      $(this).closest('.container').css('display','block');
                      $(this).closest('.container').children('p').css('display','none');
                      $(this).closest('li').css('display','block');
                      $('.menu-list-r-type').css('display', 'none');
                      // $(this).css('color', 'red');
                  }  
// 关键字标红
      var reg = new RegExp($sea, 'g');//g 全局匹配
      var html = $(this).text(); //用文字
      var newHtml = html.replace(reg, '<font class="bh" color="red">'+$sea+'</font>');
      $(this).html(newHtml); });
原文地址:https://www.cnblogs.com/pyspang/p/9732593.html