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);
});

JS搜索商品(跟外卖app店内搜索商品一样) ,keyup函数和click函数调用的更多相关文章

  1. 百度站内搜索https不可用切换api搜索,加上谷歌api站内搜索

    google推https几年了,百度开始宣传全面https,但是,百度站内搜索 自己的服务却不走https,接口报错.百度分享也是. 然后采用http://search.zhoulujun.cn/cs ...

  2. vue2.0:(十)、外卖App商品组件部分和better-scroll

    本篇中继续来给大家介绍外卖App制作中的商品组件的部分. 好,第一步,我们把商品的大致框架在goods.vue中搭建出来: menu-wrapper是左边菜单栏,foods-wrapper是右边商品栏 ...

  3. Lucene.net站内搜索—1、SEO优化

    目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...

  4. 利用Solr服务建立的站内搜索雏形---solr1

    最近看完nutch后总感觉像好好捯饬下solr,上次看到老大给我展现了下站内搜索我便久久不能忘怀.总觉着之前搭建的nutch配上solr还是有点呆板,在nutch爬取的时候就建立索引到solr服务下, ...

  5. 利用Solr服务建立的站内搜索雏形

    最近看完nutch后总感觉像好好捯饬下solr,上次看到老大给我展现了下站内搜索我便久久不能忘怀.总觉着之前搭建的nutch配上solr还是有点呆板,在nutch爬取的时候就建立索引到solr服务下, ...

  6. 通过Google Custom Search API 进行站内搜索

    今天突然想把博客的搜索改为google的站内搜索,印象中google adsense中好像提高这个站内搜索的代码,但苦逼的是google adsense帐号一直审核不通过,所以只能通过google c ...

  7. 明明有印象却找不到,APP内搜索为什么这么难用?

    赶上了互联网浪潮的当代人,每当有任何困扰,第一反应都是打开搜索引擎. 什么叫做“硬核相亲”,什么是“pick一下”,“达达主义”,“隐形贫困人口”——你都默默搜索过,不想被时代与话题抛弃.也许只有这样 ...

  8. 美团外卖app可行性分析

    美团外卖app可行性分析 1 引言 1.1编写目的 年轻人追求时尚,快捷,因此外卖行业拥有广阔的消费群体:团购的兴起,也促进了人们的消费欲望,人们继续一个外卖平台,来满足他们的欲望.O2o模式的日渐完 ...

  9. 项目vue2.0仿外卖APP(一)

    最近用vue.js做一个仿饿了么外卖APP的项目,现在也把流程啊什么的暂时先整理一下在这个博客上面. 当然,这个过程会有点长,不过确实能学到很多东西. 话不多说,马上开始吧. 1.项目介绍 选用当前最 ...

随机推荐

  1. mysql用户修改登录密码及授予用户远程登录权限

    一.修改用户登录密码: mysql> show databases;ERROR 1820 (HY000): You must SET PASSWORD before executing this ...

  2. linux 下weblogic启动和停止

    启动weblogic 本例中weblogic 安装路径为:/data/weblogic/wls/wlserver_10.3/ 1. 启动nodeManager cd /data/weblogic/wl ...

  3. mysql创建还原点

    set autocommit = 0;   insert into t1(name) values ("user1"); savepoint p1;   insert into t ...

  4. eclipse下Android工程名称的修改方法

    eclipse下Android工程名称的修改方法 对于已经建立的工程,如果发现原来的工程名不合适,此时若想彻底更改工程名,需要三个步骤: 1.更改工程名 选中工程名,右键-->Refactor- ...

  5. java transient关键字(转载)

    博客来源:http://www.blogjava.net/fhtdy2004/archive/2009/06/20/286112.html Volatile修饰的成员变量在每次被线程访问时,都强迫从主 ...

  6. 图像处理之增强---图像增强算法四种,图示与源码,包括retinex(ssr、msr、msrcr)和一种混合算法

    申明:本文非笔者原创,原文转载自:http://blog.csdn.net/onezeros/article/details/6342661 两组图像:左边较暗,右边较亮 第一行是原图像,他们下面是用 ...

  7. PostgreSQL与MySQL比較

    特性 MySQL PostgreSQL 实例 通过执行 MySQL 命令(mysqld)启动实例. 一个实例能够管理一个或多个数据库.一台server能够执行多个 mysqld 实例.一个实例管理器能 ...

  8. DirectShow音频采集pcm,实时编码AAC,附源码

    定期送福利,今天给大家送上Windows中利用DirectShow采集microphone音频,并将采集到的pcm数据,利用FAAC库编码成AAC,进行本地存储或者网络传输. 直接贴代码,解析看注释: ...

  9. spring+mybatis多数据源,动态切换

    有时我们项目中需要配置多个数据源,不同的业务使用的数据库不同 实现思路:配置多个dataSource ,再配置多个sqlSessionFactory,和dataSource一一对应.重写SqlSess ...

  10. Struts2中的数据类型转换

    Struts2对数据的类型转换 一.Struts2中自带类型转换拦截器 Struts2内部提供了大量转换器,用来完成数据类型转换的问题,有如下 * boolean 和 Boolean * char和 ...