js의 빠른 검색 기능을 구현하는 방법-JS 튜토리얼-php.cn

js의 빠른 검색 기능을 구현하는 방법

不言

풀어 주다： 2018-07-14 15:41:43

원래의

3583명이 탐색했습니다.

이 글은 js의 빠른 검색 기능을 구현하는 방법을 주로 소개합니다. 이제는 모든 사람과 공유합니다.

요즘 회사의 프로젝트가 매우 빡빡합니다. 갑자기 전체 검색 기능을 요청했을 때 가장 먼저 생각한 것은 PHP의 퍼지 검색을 사용하는 것이었지만 성능을 많이 소모하고 데이터 검색 속도가 매우 느립니다. Baidu에서 JS를 통해 검색했습니다. 모든 사람과 기능을 공유하세요.

페이지입니다

나온 후 효과 :

페이지 코드 :

<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 I only 출력 데이터를 만들었으므로 여기에는 넣지 않겠습니다

위 내용은 모두의 학습에 도움이 되길 바랍니다.