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

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

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

这个是页面

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

出来后的效果:

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

页面代码: 

    {eq name="list['state']" value='0'}
  • 请添加菜品类型
  • {else} {eq name="list['count']" value='0'}
  • 请添加菜品
  • {else} {volist name="list['data']" id='list'}
  • {$list.food_name}{$list.food_code}
  • {/volist} {/eq} {/eq}

登录后复制

js代码

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

登录后复制

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

以上就是js如何实现快速搜索?js快速搜索实例(附代码)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2737611.html

(0)
上一篇 2025年3月8日 01:37:33
下一篇 2025年3月6日 20:59:45

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js如何删除数组中的指定元素?(代码示例)

    在学习数组的过程中,数组的操作是很重要的一部分,那么如何从数组中删除指定的元素?本篇文章就给大家介绍js删除数组中的指定元素的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 本篇文章将会给大家介绍两种删除数组中的指定…

    2025年3月8日
    200
  • 如何强制让输入框的文本以大写显示?(代码示例)

    本篇文章给大家带来的内容是介绍强制让输入框的文本以大写显示的方法?(代码示例),让大家掌握多种强制转换大写的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 有的时候,在一个表单里,你只想接受某些输入或textarea…

    2025年3月8日 编程技术
    200
  • js如何进行表单的简单密码验证?(代码示例)

    本篇文章给大家带来的内容是介绍js进行表单密码的简单验证?(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们要了解一下如何实现密码的安全输入? 许多网站现在都需要注册,这意味着需要为用户分配用户名和密码…

    2025年3月8日
    200
  • css+js实现垂直旋转切换的幻灯片动画效果(附代码)

    本篇文章给大家带来的内容是用css+js实现简单的褪色幻灯片动画效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就通过代码来一步步实现幻灯片的垂直旋转切换动画效果: 1、建立html文件,编写dem…

    2025年3月8日
    200
  • js的onerror是什么意思?onerror事件如何使用?

    本篇文章给大家带来的内容是介绍js的onerror是什么意思,让大家了解onerror事件的使用方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在之前的文章【js try … catch语法结构有什么用?…

    2025年3月8日
    200
  • js中的正则表达式与RegExp 对象

    本篇文章给大家带来的内容是介绍js中的正则表达式与regexp 对象。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。【相关视频教程推荐:jquery教程】 1. js正则表达式匹配字符之含义 .     查找单个字符,除了…

    2025年3月8日
    200
  • js中Math对象是什么?如何使用?

    js中math对象是什么?如何使用?本篇文章给大家带来的内容是介绍math对象的属性和方法,让大家了解math对象的使用方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。【相关视频教程推荐:javascript教程】 1…

    2025年3月8日 编程技术
    200
  • js如何判断是否为回文字符串?

    js如何判断是否为回文字符串?本篇文章就给大家介绍js判断一个字符串是否为回文字符串的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来了解一下什么是回文字符串? 回文字符串就是,我们从开始到结束读它,和从末…

    编程技术 2025年3月8日
    200
  • js中关键字var和let的区别是什么

    本篇文章给大家带来的内容是介绍js中关键字var和let的区别是什么,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们了解一下关键字var和let有什么作用?如何使用? 关键字var var语句在javascrip…

    2025年3月8日
    200
  • js如何创建动态加载的进度条?(代码示例)

    本篇文章给大家带来的内容是介绍js如何创建动态加载的进度条?(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 进度条可以用来描述正在执行的任何任务的进度,它通常会被用于显示下载和上传时的状态。换句话说,进度条可…

    2025年3月8日
    200

发表回复

登录后才能评论