jQuery 목록 검색 기능 구현 코드에 대한 자세한 설명

간단한 목록을 구현하기 위해 오른쪽 상단에 검색 기능이 있는데, 우리가 구현하고 싶은 것은 목록 검색 기능입니다. 구체적인 예제 코드는 이 글을 참고해 보시기 바랍니다.

먼저 렌더링을 보여드리겠습니다.

이것은 오른쪽 상단에 검색 기능이 있는 간단한 목록입니다. 우리가 구현하고 싶은 것은 목록 검색 기능이 jquery를 사용하여 구현된다는 것입니다. 구체적인 코드는 다음과 같습니다

$(function(){
      $("input[type=button]").click(function(){
        var txt=$("input[type=text]").val();
        if($.trim(txt)!=""){
          $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
        }else{
          $(".ggsm_list li").show();
        }
      });
    });

버튼에 클릭 이벤트를 제공하고 먼저 입력에서 값을 가져온 다음 범위의 다른 상위 요소를 숨긴 다음(실제로는 다른 li 태그 숨김) txt가 포함된 요소를 찾습니다. (즉, 입력의 값) li를 표시한 다음 표시합니다

$("#textInput").on("keypress", function (e) {
        if (e.charCode === 13) {
          var txt=$("input[type=text]").val();
          if($.trim(txt)!=""){
            $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
          }else{
            $(".ggsm_list li").show();
          }
        }

이 코드는 키보드 Enter 키에 대한 최적화입니다(코드가 많지 않고 매우 간단합니다)

관련 권장 사항:

바이두와 유사한 학술 고급 검색 기능을 구현하기 위한 JavaScript 기반_ JavaScript 기술

php+sqlite 데이터베이스 작업 예제(생성/열기/삽입/검색)에 대한 자세한 설명

JavaScript 문자열 검색에 대한 튜토리얼 요약 캐릭터

위 내용은 jQuery 목록 검색 기능 구현 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!