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

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

jQuery UI 자동 완성 플러그인은 사용자 입력을 처리하고 관련 옵션을 제안하는 강력한 방법을 제공합니다. . 기본적으로 드롭다운 결과에는 제안 항목 내에서 사용자 입력과 일치하는 항목이 표시됩니다. 그러나 표시된 결과에서 검색 문자를 강조 표시하는 등 보다 사용자 정의된 형식을 원할 수도 있습니다.

플러그인 원숭이 패치

이를 달성하려면 다음을 수행할 수 있습니다. 라이브러리 내의 내부 기능을 재정의하는 "원숭이 패치"라는 기술을 사용합니다. 이 경우 드롭다운 목록의 각 항목을 생성하는 _renderItem 함수를 재정의해야 합니다.

사용자 정의 _renderItem 함수 생성

다음은 다음의 예입니다. 사용자 정의된 _renderItem 함수:

$.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 );
};

이 함수는 정규식을 사용하여 일치하는 문자를 분리하고 특정 스타일을 사용하여 HTML 범위 요소에 래핑합니다. 스팬 요소는 굵은 글꼴과 파란색을 사용하여 일치하는 항목을 강조 표시합니다.

패치 적용

사용자 정의 기능을 만든 후에는 다음에 적용할 수 있습니다. 문서 준비 이벤트 내에서 다음 함수를 호출하여 자동 완성 위젯:

monkeyPatchAutocomplete();

이 함수는 기본 _renderItem 함수를 사용자 정의 버전으로 대체합니다.

대소문자 유지

위 코드는 일치 항목을 강조 표시하지만 원래 입력의 대소문자는 유지하지 않습니다. 대소문자를 보존하려면 _renderItem 함수 내의 대체 줄을 다음과 같이 수정하세요.

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

대상 패치

위 변경 사항은 페이지의 모든 자동 완성 위젯에 영향을 미칩니다. 특정 인스턴스만 맞춤설정하려면 "페이지에서 단 하나의 자동완성 인스턴스를 패치하는 방법은 무엇입니까?"

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