मैं jQuery UI स्वत: पूर्ण प्लग-इन का उपयोग कर रहा हूं । क्या ड्रॉप-डाउन परिणामों में खोज वर्ण अनुक्रम को उजागर करने का एक तरीका है?
उदाहरण के लिए, यदि मेरे पास डेटा के रूप में "फू बार" है और मैं ड्रॉप-डाउन में " फू बार" प्राप्त करूंगा , तो इस तरह टाइप करेंगे :
जवाबों:
हां, अगर आप बंदर-पेटी को पूरा कर सकते हैं।
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 );
},तो आपको जो करने की आवश्यकता है, वह है कि _renderItem अपने स्वयं के निर्माण के साथ fn जो वांछित प्रभाव पैदा करता है। यह तकनीक, एक पुस्तकालय में एक आंतरिक कार्य को पुनर्परिभाषित करने के लिए, मैं सीख गया हूं कि इसे बंदर-पैचिंग कहा जाता है । यहाँ है कि मैंने यह कैसे किया:
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(...)।
अब, यह एक हैक है, क्योंकि:
सूची में दिए गए प्रत्येक आइटम के लिए एक regexp obj बनाया गया है। उस regexp obj को सभी वस्तुओं के लिए फिर से इस्तेमाल किया जाना चाहिए।
पूर्ण भाग के प्रारूपण के लिए कोई css वर्ग का उपयोग नहीं किया गया है। यह एक इनलाइन शैली है।
इसका मतलब है कि यदि आपके पास एक ही पृष्ठ पर कई ऑटोकॉम्पलेट्स हैं, तो वे सभी एक ही उपचार प्राप्त करेंगे। एक सीएसएस शैली का समाधान होगा।
... लेकिन यह मुख्य तकनीक को दिखाता है, और यह आपकी बुनियादी आवश्यकताओं के लिए काम करता है।
अद्यतन कार्य उदाहरण: http://output.jsbin.com/qixaxinuhe
टाइप किए गए पात्रों के मामले का उपयोग करने के विपरीत, मैच स्ट्रिंग्स के मामले को संरक्षित करने के लिए, इस लाइन का उपयोग करें:
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" +
"$&" +
"</span>");दूसरे शब्दों में, ऊपर दिए गए मूल कोड से शुरू करके, आपको बस इसके this.termसाथ बदलने की आवश्यकता है "$&"।
संपादित करें
उपरोक्त पृष्ठ पर प्रत्येक स्वत: पूर्ण विजेट बदलता है । यदि आप केवल एक को बदलना चाहते हैं, तो इस प्रश्न को देखें:
पृष्ठ पर स्वतः पूर्ण का केवल एक * उदाहरण * कैसे पैच करें?
var re = new RegExp(this.term, "i"); बढ़िया पोस्ट!
यह भी काम करता है:
$.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);
};@ जोर्न ज़ेफ़र और @ चीज़ो की प्रतिक्रियाओं का एक संयोजन।
$().autocomplete()
सुपर सहायक। धन्यवाद। +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>उम्मीद है की यह मदद करेगा
jQueryUI 1.9.0 बदलता है कि _renderItem कैसे काम करता है।
नीचे दिया गया कोड इस बदलाव को ध्यान में रखता है और यह भी दिखाता है कि मैं कैसे जेरे ज़ेफ़रर के jQuery स्वतः पूर्ण प्लगइन का उपयोग करके हाइलाइटिंग मिलान कर रहा था। यह समग्र खोज शब्द में सभी व्यक्तिगत शब्दों को उजागर करेगा।
नॉकआउट और जकाउट का उपयोग करने के लिए आगे बढ़ने के बाद से मुझे यह परिणाम स्टाइल करने का एक बहुत आसान तरीका मिला।
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();
});.jqAutocompleteMatch { font-weight: bold; }
this.termरेगेक्स के लिए भागने के कुछ तर्क किसी भी प्रसंस्करण को करने से पहले उपयोग किए जाने चाहिए। यह कैसे करना है के कई उत्तरों में से एक के रूप में जावास्क्रिप्ट रेगेक्स में उपयोग के लिए एस्केप स्ट्रिंग देखें ।
और भी आसान तरीके के लिए, यह आज़माएँ:
$('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/#combobox
वहाँ उपयोग में regex भी html परिणामों के साथ संबंधित है।
यहाँ मेरा संस्करण है:
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
(विकल्प टैब देखें)