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.项目介绍 选用当前最 ...
随机推荐
- x264 编码数配置
记录项目中用到一组x264快速编码参数配置,具体如下: param->i_frame_reference = 1; param->i_scenecut_threshold = 0; par ...
- wdcp新开站点或绑定域名打不开或无法访问的问题
一 用IP可以打开,但用域名打开网站显示到默认页面1 站点列表里是否有相应的网站信息 2 检查有没站点配置文件后台 >系统管理 >文件管理器 >虚拟主机站点文件(nginx,ap ...
- 怎样创建.NET Web Service http://blog.csdn.net/xiaoxiaohai123/article/details/1546941
为什么需要Web Service 在通过internet网购买商品后,你可能对配送方式感到迷惑不解.经常的情况是因配送问题找配送公司而消耗你的大量时间,对于配送公司而言这也不是一项增值服务. 为了解决 ...
- Arduino关于旋转编码器程序的介绍(Reading Rotary Encoders)--by Markdown
介绍 旋转或编码器是一个角度測量装置. 他用作精确測量电机的旋转角度或者用来控制控制轮子(能够无限旋转,而电位器只能旋转到特定位置).其中有一些还安装了一个能够在轴上按的button,就像音乐播放器的 ...
- Fedora21 安装视频播放解码器
12 12月 2014年12月12日 Posted by 涛儿 2 首先启用RPM Fusion软件源: sudo rpm -ivh http://download1.rpmfusion.org/fr ...
- 求两个有序数组的中位数(4. Median of Two Sorted Arrays)
先吐槽一下,我好气啊,想了很久硬是没有做出来,题目要求的时间复杂度为O(log(m+n)),我猜到了要用二分法,但是没有想到点子上去.然后上网搜了一下答案,感觉好有罪恶感. 题目原型 正确的思路是:把 ...
- 五、Web框架基础(2)
Tornado 异步协程编程.(其实是异步IO而非真正的异步,从内核拷贝到用户空间的过程还是同步的) 适合用户量大.高并发,如抢票.网页游戏.在线聊天等场景:或大量HTTP持久连接,通过单TCP持久连 ...
- ubuntu手机识别
1.sudo gedit /etc/udev/rules.d/51-android.rules 2.将以下内容拷贝保存 SUBSYSTEM=="usb", ATTR{idVendo ...
- new和delete的基本用法
前言 new和delete是C++中用来动态管理内存分配的运算符,其用法较为灵活.如果你对它们的几种不同用法感到困惑,混淆,那么接着看下去吧. 功能一:动态管理单变量/对象空间 下面例子使用new为单 ...
- LeetCode(82)题解: Remove Duplicates from Sorted List II
https://leetcode.com/problems/remove-duplicates-from-sorted-list-ii/ 题目: Given a sorted linked list, ...