zoukankan      html  css  js  c++  java
  • 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); });
  • 相关阅读:
    DNS原理入门
    软件架构入门
    熵:宇宙的终极规则
    新鲜事
    加密货币的本质
    汇编语言入门教程
    HTML & CSS
    [模板] 矩阵快速幂
    [模板] 三分
    [模板] 2-SAT 问题
  • 原文地址:https://www.cnblogs.com/pyspang/p/9732593.html
Copyright © 2011-2022 走看看