jQuery UI 자동 완성 드롭다운에서 검색어를 강조하는 방법은 무엇입니까?

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

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'>$&</span>");
  return $( "<li></li>" )
    .data("item.autocomplete", item)
    .append( "<a>" + t + "</a>" )
    .appendTo(ul);
};

코드에 통합

$(document).ready(...) 블록 내에서 MonkeyPatchAutocomplete 함수를 호출하세요. 사용자 정의 서식을 한 번 활성화하려면:

monkeyPatchAutocomplete();

제한 사항

이 기술은 기본 기능을 제공하지만 몇 가지 제한 사항이 있습니다.

• 각 항목에 대해 효율성을 위해 최적화될 수 있는 별도의 정규 표현식 개체를 생성합니다.
• 형식 지정에는 인라인 스타일이 사용되며 이는 동일한 페이지에 있는 여러 자동 완성 위젯의 일관성에 영향을 미칠 수 있습니다.

대소문자 유지

입력한 문자를 일치시키는 대신 검색 문자의 원래 대소문자를 유지하려면 코드에서 "this.term" 대신 "$&"를 사용하세요.

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

위 내용은 jQuery UI 자동 완성 드롭다운에서 검색어를 강조하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!