Comment implémenter la fonction de recherche rapide de js

Cet article présente principalement comment implémenter la fonction de recherche rapide de js. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Les projets de l'entreprise sont très serrés. jours. Ensuite, il y a eu toutes sortes de choses compliquées, et tout à coup j'ai voulu avoir toute la fonction de recherche. La première chose à laquelle j'ai pensé était la recherche floue utilisant PHP, mais elle consomme beaucoup de performances et la vitesse de récupération des données est extrêmement. lent. Sur Baidu, j'ai trouvé une fonction pour rechercher dans js et je l'ai partagée avec tout le monde.

Voici la page

L'effet après la sortie :

Code de la page :

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

code js

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

php ne génère que des données, donc je ne le ferai pas mettez-le ici C'est sorti

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment obtenir la valeur de la barre de défilement en encapsulant scroll.js

Comment résoudre le problème de pour l'objet dans Vue Problèmes avec les attributs qui sont des entiers non négatifs

Analyse des objets intégrés dans js

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!