굵은 일치 강조 표시를 사용하여 자동 완성 플러그인 표시를 사용자 정의하는 방법은 무엇입니까?

굵은 일치 강조 표시를 사용하여 자동 완성 플러그인 결과 표시 사용자 정의

jQuery UI의 자동 완성 플러그인에서 드롭다운 결과에서 검색어를 강조 표시하면 사용자 기능이 향상됩니다. 경험. 이 기사에서는 특정 요구 사항에 맞게 이 디스플레이를 사용자 정의하는 방법을 설명합니다.

해결책: Monkey-Patching

내부 라이브러리 기능을 재정의하는 기술인 Monkey-Patching은 다음을 제공합니다. 해결책. 제안 목록 항목을 생성하는 _renderItem 함수를 재정의하면 사용자 정의 렌더링이 가능해집니다.

다음은 일치하는 결과 부분에 굵은 강조 표시를 추가하는 원숭이 패치 코드입니다.

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

$(document).ready(..)에서 이 함수를 호출하세요.

<code class="javascript">$(document).ready(function() {
  monkeyPatchAutocomplete();
});</code>

고려 사항:

이 해킹 접근 방식에는 몇 가지 제한 사항이 있습니다.

• 정규식 패턴은 렌더링된 각 항목에 대해 생성되며 재사용이 가능합니다.
• 형식 지정을 위해 CSS 클래스 대신 인라인 스타일이 사용됩니다.

이러한 제한에도 불구하고 기술은 드롭다운 결과에서 일치하는 용어를 효과적으로 강조 표시하여 원하는 요구 사항을 충족합니다.

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