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. python(3)- 循环语句:从最内层跳出多层循环

    跳出多层循环:三层循环,最里层直接跳出3层 方法一: 在Python中,函数运行到return这一句就会停止,因此可以利用这一特性,将功能写成函数,终止多重循环 def work(): #定义函数 f ...

  2. SDUT 1068-Number Steps(数学:直线)

    Number Steps Time Limit: 1000ms   Memory limit: 10000K  有疑问?点这里^_^ 题目描写叙述 Starting from point (0,0) ...

  3. 基于bootstrap的纯静态网站目录

    一.博客页面 二.登陆页面 三.信息采集 四.管理后台 五.网站汇总(基于上边四个功能) 因为样式统一采用bootstrap的样式,所以不做介绍 样式导入可以将bootstrap下载至本地(有自动补齐 ...

  4. 宜信开源微服务任务调度平台(SIA-TASK)

    背景 无论是互联网应用或者企业级应用,都充斥着大量的批处理任务.常常需要一些任务调度系统帮助开发者解决问题.随着微服务化架构的逐步演进,单体架构逐渐演变为分布式.微服务架构.在此的背景下,很多原先的任 ...

  5. HDU5363:Key Set

    Problem Description soda has a set S with n integers {1,2,-,n}. A set is called key set if the sum o ...

  6. Mvc Autofac构造器注入

    新建MVC项目,添加程序集引用 定义接口ILog public interface ILog { string Save(string message); } 类TxtLog实现接口ILog publ ...

  7. funhub 独立游戏团队诚邀策划,美术,技术,QA 大大加入(可远程办公)

    我们刚成立的的独立游戏团队,base:广州,团队陆陆续续已经有 6 个成员了,现在还缺的岗位有策划,美术.不过有其 他岗位的仁人志士也可加入. 另外,我们支持远程办公,这是互联网行业的天然优势,一定要 ...

  8. 【BZOJ2795】[Poi2012]A Horrible Poem hash

    [BZOJ2795][Poi2012]A Horrible Poem Description 给出一个由小写英文字母组成的字符串S,再给出q个询问,要求回答S某个子串的最短循环节.如果字符串B是字符串 ...

  9. 1022. Fib数列

    https://acm.sjtu.edu.cn/OnlineJudge/problem/1022 Description 定义Fib数列:1,1,2,3,5,8,13,…1,1,2,3,5,8,13, ...

  10. php设计模式之--组合模式

    php组合模式主要用于上下级关系,可以新增叶子和树枝,分析如下代码即可明白组合模式的含义: <?php header('Content-Type:text/html;charset=utf-8' ...