Home  >  Article  >  Web Front-end  >  How to implement the fast search function of js

How to implement the fast search function of js

不言
不言Original
2018-07-14 15:41:433551browse

This article mainly introduces how to implement the fast search function of js. It has certain reference value. Now I share it with you. Friends in need can refer to it.

The company's projects are very tight these days. Then there were all kinds of messy things, and suddenly I wanted to have the entire search function. The first thing I thought of was fuzzy search using PHP, but it consumes a lot of performance, and the speed of retrieving data is extremely slow. On Baidu I found a function to search through js and shared it with everyone.

This is the page

## The effect after coming out:

Page code:

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

js code


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

php only outputs data, so it will not be released here

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to get the value of the scroll bar by encapsulating scroll.js

How to solve the problem of for in object in Vue Problems with attributes that are non-negative integers

Parsing of built-in objects in js

The above is the detailed content of How to implement the fast search function of js. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn