jQuery UI에서 자동 완성 플러그인 결과 형식을 사용자 정의하는 방법은 무엇입니까?

자동 완성 플러그인 결과 형식 사용자 정의

인기 있는 jQuery UI 자동 완성 플러그인을 사용할 때 사용자 경험을 향상시키기 위한 드롭다운 결과입니다. 이 문서에서는 이 효과를 얻는 방법을 설명합니다.

자동 완성 위젯 원숭이 패치

결과 형식을 사용자 정의하려면 기본 _renderItem 함수를 바꿔야 합니다. 자동완성 위젯. 이 함수는 드롭다운 목록의 각 항목을 생성하는 역할을 합니다. 이를 재정의하면 사용자 정의 서식을 포함하도록 항목의 모양을 수정할 수 있습니다.

다음은 원숭이 패치의 예입니다.

  function monkeyPatchAutocomplete() {
      $.ui.autocomplete.prototype._renderItem = function( ul, item) {
          var re = new RegExp("^" + this.term) ;
          var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + 
                  this.term + 
                  "</span>");
          return $( "<li></li>" )
              .data( "item.autocomplete", item )
              .append( "<a>" + t + "</a>" )
              .appendTo( ul );
      };
  }

$(문서) 내에서 이 함수를 한 번 호출하세요. Ready(...) 이벤트 핸들러를 사용하여 사용자 정의를 활성화합니다.

대소문자 구분 처리

대소문자를 사용하는 대신 일치 문자열의 대소문자를 유지하려는 경우 입력한 문자 중 다음 줄을 사용하세요.

var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + 
          "$&amp;" + 
          "</span>");

제한

이 방법을 사용하면 드롭다운 결과에서 검색어를 강조 표시할 수 있지만, 제한 사항:

• 페이지의 모든 자동 완성 위젯이 영향을 받습니다.
• 용어는 CSS 클래스 대신 인라인 스타일로 강조 표시됩니다.

추가 참고사항

페이지에서 자동완성 위젯의 특정 인스턴스 하나만 사용자 정의해야 하는 경우 보다 타겟팅된 접근 방식을 사용할 수 있습니다. 자세한 내용은 설명서를 참조하세요.

위 내용은 jQuery UI에서 자동 완성 플러그인 결과 형식을 사용자 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!