퍼지 쿼리 실제 사례 분석의 jQuery 구현

이번에는 jQuery퍼지 쿼리 구현 사례 분석을 가져왔습니다. jQuery 퍼지 쿼리 구현 시 주의사항은 무엇인가요? 다음은 실제 사례를 살펴보겠습니다.

요구 사항: 목록에 많은 내용이 포함되어 있습니다. 사용자는 목록에서 특정 항목을 찾아야 하며, 사용자 입력 값과 일치하는 항목만 표시됩니다. (백그라운드에 페이징이 없고 비동기 인터페이스가 데이터 추가로 형성된 콘텐츠 목록을 직접 반환합니다)

매개변수를 전달한 후 호출하여 쿼리할 수도 있지만 여기서 주요 기록은 front-의 구현 방법입니다. 인터페이스를 다시 호출하지 않고 퍼지 쿼리를 수행하기 위해 처리를 종료합니다.

html 부분:

<p class="search-form">
    <input type="text" placeholder="请输入关键词">
    <span class="icon-clear"></span>
</p>
<p class="content">
  <p class="title row no-gutter">
    <p class="col-20">列表一</p>
    <p class="col-20">列表二</p>
    <p class="col-20">列表三</p>
    <p class="col-20">列表四</p>
    <p class="col-20">列表五</p>
  </p>
  <p class="list-content">
    <ul>
      <li>
        <p class="code">00001</p>
        <p class="name">内容1</p>
        <p>内容2</p>
        <p>内容3</p>
        <p>内容4</p>
      </li>
      <li>……</li>
    </ul>
  </p>
</p>

js 부분:

queryList: function(){
  $(".search-input").on("input propertychange", function() {
    var queryStr = $.trim($(".search-input").val());
    if(queryStr === ''){
      $(".list-content li").show();
    }else{
    // 以下是匹配某些列的内容，如果是匹配全部列的话就把find()和.parent()去掉即可
      $(".list-content li").hide().find(".code, .name").filter(":contains('"+queryStr+"')").parent("li").show();
      //$(".list-content").refresh(); //重新刷新列表把隐藏的dom结构去掉。
    }
  });
}

분석: 위는 프론트 엔드 js의 퍼지 쿼리 기능을 구현한 것입니다. 하하. 코드에 리스닝 이벤트에 추가 입력이 있는데 iOS와 호환된다고 하는데, 구체적으로 테스트해본 적이 없는데 알려주실 수 있나요?

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

React 라우팅 관리 및 React Router 사용에 대한 자세한 설명

React가 React-Router 라우팅에서 로그인 확인 제어를 구현하는 방법

위 내용은 퍼지 쿼리 실제 사례 분석의 jQuery 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!