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(9)- python基础知识刷题

    1.  执行 Python 脚本的两种方式 交互方式:命令行 Windows操作系统下,快捷键cmd,输入“python”启动交互式python解释器. 文件方式:python文件 2.  简述位.字 ...

  2. css3: background-image使用多个背景图像

    CSS3 允许元素使用多个背景图像. background-image: url(img/ic_ms.png),url(img/icon_dutyfree_invite.png); <!DOCT ...

  3. FPGA机器学习之机器学习的n中算法总结1

    机器学习是AI领域的重要一门学科.前面我描写叙述过.我计划从事的方向是视觉相关的机器学习分类识别,所以可能在每一个算法的分析中,仅仅增加在视频.视觉领域的作用. 我毛华望QQ849886241.技术博 ...

  4. URL 截取参数 正则

    用处很多,记录下. function getvl(name) { var reg = new RegExp("(^|\\?|&)"+ name +"=([^&am ...

  5. 每天一点儿Java--list

    import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; /** * ...

  6. memcache及其telnet命令使用详解

    1.启动Memcache 常用参数memcached 1.4.3-p <num>      设置端口号(默认不设置为: 11211)-U <num>      UDP监听端口 ...

  7. EasyDarwin开源流媒体云平台设计与实现(分布式+负载均衡)

    前言 早在2013年我就设计了一套架构非常简单的分布式流媒体服务器平台<基于Darwin实现的分布式流媒体直播服务器系统>,当时的考虑如今看来有诸多的细节点没有考虑到:1.CMS是单点部署 ...

  8. struts2的输入检验

    一.输入校验简介 一个健壮的Web应用程序必须确保用户输入是合法的.比如在注册用户的时候,将用处注册信息保存到数据库之前一般我们会判断用户输入的密码长度是否过短,或者用户的email地址格式是否正确. ...

  9. Winform拖拽改变无边框窗体大小

    大家在进行Winform开发过程中,很容易就可以完成一个窗口的布局工作,但现在的软件界面美化效果一个比一个好,很多软件都是无边框的,于是乎,你是不是也感叹:winform的带边框的窗体如此丑陋,我一定 ...

  10. Transforming Auto-encoders

    http://www.cs.toronto.edu/~hinton/absps/transauto6.pdf The artificial neural networks that are used ...