How to implement the fast search function of js-JS Tutorial-php.cn

How to implement the fast search function of js

不言

Release： 2018-07-14 15:41:43

Original

3582 people have browsed it

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>

Copy after login

js code

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

Copy after login

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!