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. dos alias/cname address

    diego@localhost sdk/include/Poco/Net]# dig b.wpss.cn ; <<>> DiG - <<>> b.wps ...

  2. java new一个接口到底要做什么

    转自:http://www.cnblogs.com/yjmyzz/p/3448330.html java中的匿名类有一个倍儿神奇的用法,见下面代码示例: 1 package contract; 2 3 ...

  3. ubuntu环境准备

    一. 桌面方面看起来比较不爽,12的版本用起更不习惯,决定改成命令行登陆 a. vi  /ect/default/grub 文件 b. 修改成第二个红框的情况 c. 执行update-grub命令 d ...

  4. pandas-数据分析

    pandas是一个强大的python数据分析的工具包 pandas是基于numpy构建的 pandas的主要功能: 具备对其功能的数据结构DataFrame.Series 集成世间序列功能 提供丰富的 ...

  5. kubernetes容器编排之定义环境变量以及通过downwardapi把pod信息作为环境变量传入容器内

    系列目录 在学习docker的时候,大家可能经常看到不少示例在docker run的时候指定环境变量(比如wordpress的docker示例就是通过环境变量传入账户和密码到容器内).这里之所以经常用 ...

  6. Caffe学习系列(12):训练和测试自己的图片--linux平台

    Caffe学习系列(12):训练和测试自己的图片   学习caffe的目的,不是简单的做几个练习,最终还是要用到自己的实际项目或科研中.因此,本文介绍一下,从自己的原始图片到lmdb数据,再到训练和测 ...

  7. windows命令大全(转载)

    winver---------检查Windows版本 wmimgmt.msc打开Windows管理体系结构(wmi) wupdmgrWindows更新程序 w脚本Windows脚本宿主设置 write ...

  8. C# 操作World生成报告

    直接上代码 using System; using System.IO; using System.Data; using Word = Microsoft.Office.Interop.Word; ...

  9. 程序猿的量化交易之路(27)--Cointrader之PriceData价格数据(14)

    转载须注明出处:http://blog.csdn.net/minimicall?viewmode=contents,http://cloudtrade.top/ PriceData:价格数据.价格数据 ...

  10. 2809: [Apio2012]dispatching

    2809: [Apio2012]dispatching Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 3102  Solved: 1641 [Sub ...