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);
});
JS搜索商品(跟外卖app店内搜索商品一样) ,keyup函数和click函数调用的更多相关文章
- 百度站内搜索https不可用切换api搜索,加上谷歌api站内搜索
google推https几年了,百度开始宣传全面https,但是,百度站内搜索 自己的服务却不走https,接口报错.百度分享也是. 然后采用http://search.zhoulujun.cn/cs ...
- vue2.0:(十)、外卖App商品组件部分和better-scroll
本篇中继续来给大家介绍外卖App制作中的商品组件的部分. 好,第一步,我们把商品的大致框架在goods.vue中搭建出来: menu-wrapper是左边菜单栏,foods-wrapper是右边商品栏 ...
- Lucene.net站内搜索—1、SEO优化
目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...
- 利用Solr服务建立的站内搜索雏形---solr1
最近看完nutch后总感觉像好好捯饬下solr,上次看到老大给我展现了下站内搜索我便久久不能忘怀.总觉着之前搭建的nutch配上solr还是有点呆板,在nutch爬取的时候就建立索引到solr服务下, ...
- 利用Solr服务建立的站内搜索雏形
最近看完nutch后总感觉像好好捯饬下solr,上次看到老大给我展现了下站内搜索我便久久不能忘怀.总觉着之前搭建的nutch配上solr还是有点呆板,在nutch爬取的时候就建立索引到solr服务下, ...
- 通过Google Custom Search API 进行站内搜索
今天突然想把博客的搜索改为google的站内搜索,印象中google adsense中好像提高这个站内搜索的代码,但苦逼的是google adsense帐号一直审核不通过,所以只能通过google c ...
- 明明有印象却找不到,APP内搜索为什么这么难用?
赶上了互联网浪潮的当代人,每当有任何困扰,第一反应都是打开搜索引擎. 什么叫做“硬核相亲”,什么是“pick一下”,“达达主义”,“隐形贫困人口”——你都默默搜索过,不想被时代与话题抛弃.也许只有这样 ...
- 美团外卖app可行性分析
美团外卖app可行性分析 1 引言 1.1编写目的 年轻人追求时尚,快捷,因此外卖行业拥有广阔的消费群体:团购的兴起,也促进了人们的消费欲望,人们继续一个外卖平台,来满足他们的欲望.O2o模式的日渐完 ...
- 项目vue2.0仿外卖APP(一)
最近用vue.js做一个仿饿了么外卖APP的项目,现在也把流程啊什么的暂时先整理一下在这个博客上面. 当然,这个过程会有点长,不过确实能学到很多东西. 话不多说,马上开始吧. 1.项目介绍 选用当前最 ...
随机推荐
- python(3)- 循环语句:从最内层跳出多层循环
跳出多层循环:三层循环,最里层直接跳出3层 方法一: 在Python中,函数运行到return这一句就会停止,因此可以利用这一特性,将功能写成函数,终止多重循环 def work(): #定义函数 f ...
- SDUT 1068-Number Steps(数学:直线)
Number Steps Time Limit: 1000ms Memory limit: 10000K 有疑问?点这里^_^ 题目描写叙述 Starting from point (0,0) ...
- 基于bootstrap的纯静态网站目录
一.博客页面 二.登陆页面 三.信息采集 四.管理后台 五.网站汇总(基于上边四个功能) 因为样式统一采用bootstrap的样式,所以不做介绍 样式导入可以将bootstrap下载至本地(有自动补齐 ...
- 宜信开源微服务任务调度平台(SIA-TASK)
背景 无论是互联网应用或者企业级应用,都充斥着大量的批处理任务.常常需要一些任务调度系统帮助开发者解决问题.随着微服务化架构的逐步演进,单体架构逐渐演变为分布式.微服务架构.在此的背景下,很多原先的任 ...
- 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 ...
- Mvc Autofac构造器注入
新建MVC项目,添加程序集引用 定义接口ILog public interface ILog { string Save(string message); } 类TxtLog实现接口ILog publ ...
- funhub 独立游戏团队诚邀策划,美术,技术,QA 大大加入(可远程办公)
我们刚成立的的独立游戏团队,base:广州,团队陆陆续续已经有 6 个成员了,现在还缺的岗位有策划,美术.不过有其 他岗位的仁人志士也可加入. 另外,我们支持远程办公,这是互联网行业的天然优势,一定要 ...
- 【BZOJ2795】[Poi2012]A Horrible Poem hash
[BZOJ2795][Poi2012]A Horrible Poem Description 给出一个由小写英文字母组成的字符串S,再给出q个询问,要求回答S某个子串的最短循环节.如果字符串B是字符串 ...
- 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, ...
- php设计模式之--组合模式
php组合模式主要用于上下级关系,可以新增叶子和树枝,分析如下代码即可明白组合模式的含义: <?php header('Content-Type:text/html;charset=utf-8' ...