자동 완성 플러그인 결과를 사용자 지정하는 방법은 무엇입니까?
jQuery UI 자동 완성 플러그인을 사용하고 있습니다.드롭다운 결과에서 검색 문자 시퀀스를 강조 표시하는 방법이 있습니까?
예를 들어, "foo bar"를 데이터로 지정하고 "foo"를 입력하면 다음과 같이 드롭다운에 "foo bar"가 표시됩니다.
네, 원숭이 패치 자동 완성하시면 가능합니다.
jQuery UI의 v1.8rc3에 포함된 자동 완성 위젯에서는 자동 완성 위젯의 _renderMenu 함수에 제안 팝업이 생성됩니다.이 기능은 다음과 같이 정의됩니다.
_renderMenu: function( ul, items ) {
var self = this;
$.each( items, function( index, item ) {
self._renderItem( ul, item );
});
},
_renderItem 함수는 다음과 같이 정의됩니다.
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
},
따라서 _renderItemfn을 원하는 효과를 생성하는 자체 생성물로 대체해야 합니다.도서관에서 내부 기능을 재정의하는 이 기술을 원숭이 패치라고 부릅니다.제가 한 방법은 다음과 같습니다.
function monkeyPatchAutocomplete() {
// don't really need this, but in case I did, I could store it and chain
var oldFn = $.ui.autocomplete.prototype._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 );
};
}
해당 함수를 한 번 호출합니다.$(document).ready(...).
이것은 해킹입니다. 이유는:
목록에 렌더링된 모든 항목에 대해 정규식 작업이 생성됩니다.모든 항목에 대해 해당 regexpob을 다시 사용해야 합니다.
완료된 부품의 포맷에 사용되는 CSS 클래스가 없습니다.인라인 스타일입니다.
즉, 한 페이지에 여러 개의 자동 완성기가 있으면 모두 동일한 처리를 받게 됩니다.CSS 스타일이면 해결할 수 있습니다.
...기본적인 요구사항을 충족하는 주요 기술을 보여줍니다.
업데이트된 작업 예제: http://output.jsbin.com/qixaxinuhe
입력한 문자의 대소문자를 사용하는 대신 일치 문자열의 대소문자를 보존하려면 다음 행을 사용합니다.
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" +
"$&" +
"</span>");
즉, 위의 원래 코드부터 교체하면 됩니다.this.term와 함께"$&".
편집
위의 내용은 페이지의 모든 자동 완성 위젯을 변경합니다.하나만 변경하려면 다음 질문을 참조하십시오.
페이지에서 *단 하나의* 자동 완성 인스턴스를 패치하는 방법은 무엇입니까?
이 기능도 작동합니다.
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
@Jörn Zaeffer와 @Cheeso의 반응의 조합.
정말 도움이 됩니다.감사합니다. +1.
다음은 "문자열은 용어로 시작해야 함"을 정렬하는 가벼운 버전입니다.
function hackAutocomplete(){
$.extend($.ui.autocomplete, {
filter: function(array, term){
var matcher = new RegExp("^" + term, "i");
return $.grep(array, function(value){
return matcher.test(value.label || value.value || value);
});
}
});
}
hackAutocomplete();
다음은 기능적인 전체 예입니다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Autocomplete - jQuery</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label for="search"></label>
<input type="text" name="search" id="search" />
</form>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
var availableTags = [
"JavaScript",
"ActionScript",
"C++",
"Delphi",
"Cobol",
"Java",
"Ruby",
"Python",
"Perl",
"Groove",
"Lisp",
"Pascal",
"Assembly",
"Cliper",
];
$('#search').autocomplete({
source: availableTags,
minLength: 3
});
});
</script>
</body>
</html>
이것이 도움이 되길 바랍니다.
jQuery UI 1.9.0은 _renderItem의 작동 방식을 변경합니다.
아래 코드는 이러한 변경을 고려하고 Jörn Zaefferer의 jQuery Autocomplete 플러그인을 사용하여 하이라이트 매칭을 수행한 방법을 보여줍니다.전체 검색어에서 모든 개별 용어가 강조 표시됩니다.
Knockout과 jqAuto를 사용하는 것으로 이동한 이후로 결과를 스타일링하는 훨씬 쉬운 방법을 알게 되었습니다.
function monkeyPatchAutocomplete() {
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
// Escape any regex syntax inside this.term
var cleanTerm = this.term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
// Build pipe separated string of terms to highlight
var keywords = $.trim(cleanTerm).replace(' ', ' ').split(' ').join('|');
// Get the new label text to use with matched terms wrapped
// in a span tag with a class to do the highlighting
var re = new RegExp("(" + keywords + ")", "gi");
var output = item.label.replace(re,
'<span class="ui-menu-item-highlight">$1</span>');
return $("<li>")
.append($("<a>").html(output))
.appendTo(ul);
};
};
$(function () {
monkeyPatchAutocomplete();
});
훨씬 더 쉬운 방법은 다음과 같습니다.
$('ul: li: a[class=ui-corner-all]').each (function (){
//grab each text value
var text1 = $(this).text();
//grab user input from the search box
var val = $('#s').val()
//convert
re = new RegExp(val, "ig")
//match with the converted value
matchNew = text1.match(re);
//Find the reg expression, replace it with blue coloring/
text = text1.replace(matchNew, ("<span style='font-weight:bold;color:green;'>") + matchNew + ("</span>"));
$(this).html(text)
});
}
테드 드 코닝의 해결책을 다시 한번 보여드리겠습니다.다음을 포함합니다.
- 대/소문자를 구분하지 않는 검색
- 검색된 문자열의 많은 항목 찾기
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
var sNeedle = item.label;
var iTermLength = this.term.length;
var tStrPos = new Array(); //Positions of this.term in string
var iPointer = 0;
var sOutput = '';
//Change style here
var sPrefix = '<strong style="color:#3399FF">';
var sSuffix = '</strong>';
//Find all occurences positions
tTemp = item.label.toLowerCase().split(this.term.toLowerCase());
var CharCount = 0;
tTemp[-1] = '';
for(i=0;i<tTemp.length;i++){
CharCount += tTemp[i-1].length;
tStrPos[i] = CharCount + (i * iTermLength) + tTemp[i].length
}
//Apply style
i=0;
if(tStrPos.length > 0){
while(iPointer < sNeedle.length){
if(i<=tStrPos.length){
//Needle
if(iPointer == tStrPos[i]){
sOutput += sPrefix + sNeedle.substring(iPointer, iPointer + iTermLength) + sSuffix;
iPointer += iTermLength;
i++;
}
else{
sOutput += sNeedle.substring(iPointer, tStrPos[i]);
iPointer = tStrPos[i];
}
}
}
}
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + sOutput + "</a>")
.appendTo(ul);
};
정규식이 필요 없고 레이블의 여러 결과와 일치하는 버전이 있습니다.
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
var highlighted = item.label.split(this.term).join('<strong>' + this.term + '</strong>');
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + highlighted + "</a>")
.appendTo(ul);
};
콤보박스 데모를 살펴보십시오. 결과 강조 표시가 포함되어 있습니다. http://jqueryui.com/demos/autocomplete/ #combox
그곳에서 사용되는 정규식도 html 결과를 처리합니다.
내 버전은 다음과 같습니다.
- ReGEx 대신 DOM 함수를 사용하여 문자열 끊기/스팬 태그 삽입
- 모두가 아닌 지정된 자동 완성만 영향을 받습니다.
- UI 버전 1.9.x와 함께 작동합니다.
function highlightText(text, $node) {
var searchText = $.trim(text).toLowerCase(),
currentNode = $node.get(0).firstChild,
matchIndex,
newTextNode,
newSpanNode;
while ((matchIndex = currentNode.data.toLowerCase().indexOf(searchText)) >= 0) {
newTextNode = currentNode.splitText(matchIndex);
currentNode = newTextNode.splitText(searchText.length);
newSpanNode = document.createElement("span");
newSpanNode.className = "highlight";
currentNode.parentNode.insertBefore(newSpanNode, currentNode);
newSpanNode.appendChild(newTextNode);
}
}
$("#autocomplete").autocomplete({
source: data
}).data("ui-autocomplete")._renderItem = function (ul, item) {
var $a = $("<a></a>").text(item.label);
highlightText(this.term, $a);
return $("<li></li>").append($a).appendTo(ul);
};
다음 코드를 사용할 수 있습니다.
lib:
$.widget("custom.highlightedautocomplete", $.ui.autocomplete, {
_renderItem: function (ul, item) {
var $li = $.ui.autocomplete.prototype._renderItem.call(this,ul,item);
//any manipulation with li
return $li;
}
});
및 논리:
$('selector').highlightedautocomplete({...});
재정의할 수 있는 사용자 지정 위젯을 생성합니다._renderItem _renderItem원래 플러그인 프로토타입의.
내 예에서는 코드를 단순화하기 위해 원래 렌더 함수를 사용하기도 했습니다.
자동 완성 보기가 다른 다른 위치에서 플러그인을 사용하고 코드를 손상시키지 않으려면 중요합니다.
타사 플러그인을 대신 사용하는 경우 강조 표시된 옵션이 있습니다. http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
(옵션 탭 참조)
여러 값을 지원하려면 다음 기능을 추가하기만 하면 됩니다.
function getLastTerm( term ) {
return split( term ).pop();
}
var t = String(item.value).replace(new RegExp(getLastTerm(this.term), "gi"), "<span class='ui-state-highlight'>$&</span>");
언급URL : https://stackoverflow.com/questions/2435964/how-can-i-custom-format-the-autocomplete-plug-in-results
'programing' 카테고리의 다른 글
| Oracle에서 Azure DB의 텍스트 필드로 clob 필드를 내보내는 중 오류 발생 (0) | 2023.08.04 |
|---|---|
| Android TextView에서 텍스트 오른쪽 정렬 (0) | 2023.08.04 |
| Node.js에서 버퍼를 읽기 가능한 스트림으로 변환 (0) | 2023.08.04 |
| Android에서 텍스트 편집 비활성화 (0) | 2023.08.04 |
| C에서 '0'을 빼면 문자가 나타내는 숫자가 되는 이유는 무엇입니까? (0) | 2023.08.04 |