Comment implémenter la recherche rapide en js ? js exemple de recherche rapide (avec code)

Le contenu de cet article est de présenter comment implémenter la recherche rapide en js ? js exemple de recherche rapide (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

L'entreprise a été très nerveuse à propos du projet ces jours-ci, et il y a eu toutes sortes de choses compliquées. Soudain, on a dit qu'elle voulait l'intégralité de la fonction de recherche. La première chose qui lui est venue à l'esprit était la recherche floue. en utilisant PHP, mais cela consomme beaucoup de performances. Et la vitesse de récupération des données est très lente. J'ai trouvé une fonction de recherche via js sur Baidu et je l'ai partagée avec tout le monde.

Voici l'effet après la sortie de la page

 :

Code de la page :

<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>

code js

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

PHP ne génère que des données, elles ne seront donc pas publiées ici,

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!