How to implement fast search in js? js quick search example (with code)

The content of this article is to introduce how to implement fast search in js? js quick search example (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The company has been very nervous about the project these days, and there have been all kinds of messy things. Suddenly it was said that it wanted the entire search function. The first thing that came to mind was to use PHP fuzzy search, but it consumes a lot of performance. And the speed of retrieving data is very slow. I found a search function through js on Baidu and shared it with everyone.

This is the effect after the page

comes out:

　

Page code:

<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=&#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

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

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

The above is the detailed content of How to implement fast search in js? js quick search example (with code). For more information, please follow other related articles on the PHP Chinese website!