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); });
  • 相关阅读:
    CGI编程完全手册(转)
    Linux下读写芯片的I2C寄存器(转)
    Linux内核中_IO,_IOR,_IOW,_IOWR宏的用法与解析
    H264中的SPS、PPS提取与作用(转)
    H264码流打包分析(精华)--转
    嵌入式Linux USB WIFI驱动的移植(转)
    推荐一款技术人必备的接口测试神器:Apifox
    Java 设置、删除、获取Word文档背景(基于Spire.Cloud.SDK for Java)
    Java 添加、删除、格式化Word中的图片( 基于Spire.Cloud.SDK for Java )
    Java 添加、删除、替换、格式化Word中的文本(基于Spire.Cloud.SDK for Java)
  • 原文地址:https://www.cnblogs.com/pyspang/p/9732593.html
Copyright © 2011-2022 走看看