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와 호환된다고 하는데, 구체적으로 테스트해본 적이 없는데 알려주실 수 있나요?

또 다른 문제는 위의 구현 방법을 사용하면 목록 내용이 수천 개 이상일 때 js(숨기기 또는 표시)를 통해 많은 수의 DOM 구조를 조작해야 하기 때문에 양식 입력 시 지연이 발생한다는 것입니다. PC에서는 상황이 그다지 심각하지 않지만 휴대폰에서 테스트했을 때 정말 "멈췄습니다". 어떤 마스터가 더 나은 방법을 가지고 있다면 개선하고 싶습니다!

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

추천 도서:

vue 프로젝트

Js 클래식 케이스 코드 분석에서 공개 바닥글 구성 요소의 하단 위치 적응 단계에 대한 자세한 설명

위 내용은 jQuery를 사용하여 퍼지 쿼리를 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!