JS搜索商品(跟外卖app店内搜索商品一样) ,keyup函数和click函数调用
2024-10-20 20:43:53
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);
});
最新文章
- 微信Api分享
- Java数据结构——树的三种存储结构
- fibonacci数列(五种)
- Linux堆内存管理深入分析(下)
- 写在SDOI2016Round1前的To Do List
- ROS主题发布订阅
- ZOJ 3879 Capture the Flag
- java中的多线程——进度1
- nginx的url重写[rewrite规则和参考]
- Nio Client
- oracle数据库热备中的备份和恢复及例子
- [android] 采用断点调试的方式观察pull解析的流程
- 修改ElementUI源码样式
- C# 语句中的各种单例模式代码
- IPC&#39;s epoch 6 is less than the last promised epoch 7
- JavaScript pop()函数弹出数组最后数据
- HashMap与ConcurrentHashMap的区别<;转>;
- django入门-初窥门径-part1
- 『Python基础-12』各种推导式(列表推导式、字典推导式、集合推导式)
- Asp.net2.0里的SessionPageStatePersister