js如何实现快速搜索?js快速搜索实例(附代码)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是介绍js如何实现快速搜索?js快速搜索实例(附代码)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

公司这几天项目很紧张,然后一直有各种乱七八糟的事,突然说要整个搜索的功能,第一时间想到的就是用php的模糊搜索,但是性能耗的很大,并且调取出的数据的速度贼慢,在百度上找到一个通过js来搜索的功能分享给大家。

这个是页面

js如何实现快速搜索?js快速搜索实例(附代码)

出来后的效果:

 js如何实现快速搜索?js快速搜索实例(附代码)

页面代码: 

<div style="border:1px solid #ccc;margin:20px;padding-bottom:10px;" id="foodList">             <ul>                 {eq name="list['state']" value='0'}                     <li>请添加菜品类型</li>                 {else}                     {eq name="list['count']" value='0'}                         <li>请添加菜品</li>                     {else}                         {volist name="list['data']" id='list'}                         <li data-p='{eq name="$list.food_p1" value=".00"}0{/eq}{$list.food_p1}' data-u='{$list.food_u1}' data-id='{$list.food_id}'>{$list.food_name}<i>{$list.food_code}</i></li>                         {/volist}                     {/eq}                 {/eq}             </ul>             <div class="cl"></div>         </div>

js代码

$("#foodCode").keyup(function(){             $("#foodList ul li").stop().hide().filter(":contains('"+($(this).val())+"')").show();//contains 匹配文本中内容 });

php只做了输出数据所以在这里就不放出来了,

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » js如何实现快速搜索?js快速搜索实例(附代码)

发表评论

提供最优质的资源集合

立即查看 了解详情