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

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

Q: 자동 완성 드롭다운 결과에서 검색어를 강조 표시할 수 있습니까?

예, 자동 완성 플러그인 결과의 형식을 사용자 정의하여 검색된 문자를 강조 표시할 수 있습니다.

A: 자동 완성 위젯 몽키 패치

이 효과를 얻으려면 라이브러리의 내부 함수를 재정의하는 기술인 원숭이 패치를 활용하세요. 자동 완성 위젯(jQuery UI 버전 1.8rc3)에서 _renderItem 함수는 드롭다운 결과 생성을 담당합니다. 재정의하는 방법은 다음과 같습니다.

function monkeyPatchAutocomplete() {
  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 );
}

B: 대소문자를 "$&

으로 유지하려면 일치하는 문자열의 대소문자를 유지하려면 this.term을 $로 바꾸세요. & 교체 기능에서:

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

C: 제한 사항

이 해킹에는 다음과 같은 제한 사항이 있습니다.

• 새 RegExp 개체 목록에 렌더링된 각 항목에 대해 생성됩니다.
• 형식 지정에 CSS 클래스가 사용되지 않으므로 동일한 페이지에 있는 여러 자동 완성의 스타일이 동일합니다.

D : 특정 인스턴스에 변경 사항 적용

하나의 자동 완성 인스턴스만 수정해야 하는 경우 다음 질문을 참조하세요. 페이지에서 단 하나의 자동 완성 인스턴스를 패치하는 방법은 무엇입니까?

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