jQuery를 사용하여 퍼지 쿼리 기능이 포함된 콤보박스 구성 요소를 구축하는 방법

jQuery 콤보박스 퍼지 쿼리는 검색창의 일반적인 형태입니다. 사용자는 정확한 검색에 비해 키워드를 입력할 수 있으며, 퍼지 쿼리가 더 편리하고 빠릅니다. 이 기사에서는 jQuery를 사용하여 퍼지 쿼리 기능이 있는 콤보박스 구성 요소를 만드는 방법을 소개합니다.

1. 기본 지식

jQuery 콤보박스 퍼지 쿼리를 사용하려면 다음 기본 지식을 숙지해야 합니다.

1. jQuery

jQuery는 HTML 문서 작업, 이벤트 처리, 애니메이션 효과를 가능하게 하는 빠르고 간결한 JavaScript 라이브러리입니다. 및 AJAX 작동이 더 쉬워졌습니다. jQuery를 사용하면 JavaScript 프로그래밍의 복잡성이 크게 단순화될 수 있습니다.

2. Combobox

Combobox는 사용자가 텍스트를 입력하거나 드롭다운 목록에서 항목을 선택할 수 있는 텍스트 상자와 드롭다운 목록 상자로 구성된 구성 요소입니다. 그 중 텍스트 상자는 키워드를 입력하는 데 사용되고, 드롭다운 목록은 검색 결과를 표시하는 데 사용됩니다.

3. 퍼지 쿼리

퍼지 쿼리는 사용자가 키워드를 입력하면 시스템에서 해당 키워드와 정확히 일치하는 검색 결과가 아닌 해당 키워드가 포함된 모든 검색 결과를 반환한다는 의미입니다.

2. jQuery Combobox 퍼지 쿼리 작성

다음은 jQuery Combobox 퍼지 쿼리를 작성하는 단계입니다.

1. jQuery 라이브러리 소개

페이지 상단에 jQuery 라이브러리 소개:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2. 텍스트 상자 만들기 드롭다운 목록

HTML 코드는 다음과 같습니다.

<label for="search">Search:</label>
<input type="text" id="search">
<select id="results"></select>

3. JS 함수 정의

페이지 끝에 다음 코드를 추가합니다.

$(function() {
  var availableResults = [
    "Result 1",
    "Result 2",
    "Result 3",
    "Result 4",
    "Result 5"
  ];
 
  $("#search").autocomplete({
    source: function(request, response) {
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
      response($.grep(availableResults, function(item) {
        return matcher.test(item);
      }));
    }
  });
});

4. 페이지 테스트

페이지를 열고 키워드를 입력합니다. 검색 상자의 드롭다운 목록에는 해당 키워드 검색 결과가 포함된 모든 파일이 표시됩니다.

3. 전체 코드 예제

  
  
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  
  <script>
  $( function() {
    var availableResults = [
      "Result 1",
      "Result 2",
      "Result 3",
      "Result 4",
      "Result 5"
    ];
    $( "#search" ).autocomplete({
      source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
        response( $.grep( availableResults, function( item ){
            return matcher.test( item );
        }) );
      }
    });
  } );
  </script>


 
<label for="search">Search:</label>
<input type="text" id="search">
<select id="results"></select>
 

요약:

위 내용은 jQuery를 사용하여 Combobox 퍼지 쿼리를 작성하는 모든 단계입니다. 이 기술을 사용하면 강력한 검색 기능을 갖춘 웹 애플리케이션을 빠르게 개발할 수 있습니다. 동시에 더 나은 사용자 경험을 달성하기 위해 데이터베이스 데이터의 쿼리 효율성과 정확성을 보장하는 데도 주의를 기울여야 합니다.

위 내용은 jQuery를 사용하여 퍼지 쿼리 기능이 포함된 콤보박스 구성 요소를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!