jQuery UI 자동 완성 결과에서 검색어를 강조하는 방법은 무엇입니까?
Oct 21, 2024 am 08:05 AM자동 완성 플러그인 결과 사용자 정의
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7281
9


자바 튜토리얼
1622
14


Cakephp 튜토리얼
1341
46


라라벨 튜토리얼
1258
25


PHP 튜토리얼
1205
29

