আমি jQuery UI স্বয়ংক্রিয়রূপে প্লাগ-ইন ব্যবহার করছি । ড্রপ-ডাউন ফলাফলগুলিতে অনুসন্ধানের অক্ষর ক্রমটি হাইলাইট করার কোনও উপায় আছে?
উদাহরণস্বরূপ, যদি আমার কাছে ডেটা হিসাবে "foo বার" থাকে এবং আমি "foo" টাইপ করি তবে ড্রপ-ডাউন-এ " foo বার" পাব , এর মতো:
আমি কীভাবে স্বতঃপূরণ প্লাগ-ইন ফলাফলগুলি কাস্টম-ফর্ম্যাট করতে পারি?
উত্তর:
হ্যাঁ, আপনি যদি বানর-প্যাচটি স্বয়ংক্রিয়ভাবে সম্পূর্ণ করেন তবে আপনি এটি করতে পারেন।
JQuery UI এর v1.8rc3 এ অন্তর্ভুক্ত স্বতঃসম্পূর্ণ উইজেটটিতে, স্বতঃসিদ্ধ উইজেটের _renderMenu ফাংশনে পরামর্শের পপআপ তৈরি করা হয়। এই ফাংশনটি এভাবে সংজ্ঞায়িত করা হয়:
_renderMenu: function( ul, items ) {
var self = this;
$.each( items, function( index, item ) {
self._renderItem( ul, item );
});
},_রেন্ডার আইটেম ফাংশনটি এর মতো সংজ্ঞায়িত হয়:
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
},সুতরাং আপনাকে যা করতে হবে তা হ'ল _rendre আইটেম 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 আপত্তি সব আইটেমের জন্য পুনরায় ব্যবহার করা উচিত।
সম্পূর্ণ অংশের বিন্যাসকরণের জন্য কোনও সিএসএস ক্লাস ব্যবহার করা হয়নি। এটি একটি ইনলাইন স্টাইল।
এর অর্থ একই পাতায় যদি আপনার একাধিক অটোকম্প্লেট থাকে তবে তারা সকলেই একই চিকিত্সা পাবেন। একটি সিএসএস শৈলী এটি সমাধান করবে।
... তবে এটি মূল কৌশলটি চিত্রিত করে এবং এটি আপনার প্রাথমিক প্রয়োজনীয়তার জন্য কাজ করে।
আপডেট হওয়া কাজের উদাহরণ: http://output.jsbin.com/qixaxinuhe
টাইপ করা অক্ষরের ক্ষেত্রে ব্যবহারের বিপরীতে ম্যাচের স্ট্রিংগুলির ক্ষেত্রে সংরক্ষণ করতে এই লাইনটি ব্যবহার করুন:
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" +
"$&" +
"</span>");অন্য কথায়, উপরের মূল কোড থেকে শুরু করে, আপনাকে কেবল এটির this.termসাথে প্রতিস্থাপন করতে হবে "$&"।
সম্পাদনা করুন
উপরের পৃষ্ঠাটির প্রতিটি স্ব-পরিপূর্ণ উইজেট পরিবর্তন করে । আপনি যদি কেবল একটি পরিবর্তন করতে চান তবে এই প্রশ্নটি দেখুন:
কীভাবে কোনও পৃষ্ঠায় স্বতঃপূরণের * মাত্র একটি * উদাহরণ প্যাচ করবেন?
ধন্যবাদ চিসো। আপনি কি এর জন্য জেসবিন লিঙ্কটি রেখেছেন?
—
dev.e.loper
মনে রাখবেন যে আপনি যদি চেইন জিনিসগুলি পাশাপাশি করেন তবে প্রসঙ্গে পুনরায় সেট করা গুরুত্বপূর্ণ: OldFn.apply (এটি, [উল, আইটেম]);
—
ইমানাটন
আপনাকে অনেক ধন্যবাদ! এটি jQuery UI এর অংশ হয়ে উঠলে দুর্দান্ত লাগবে।
—
ডেভিড রাইডার
আমি একটি কথা বলব যদি আপনি এটির সাথে মেলে এমন স্ট্রিংয়ের কোনও অংশে ফলাফলটি বোল্ড করতে চান (কেবল শুরু নয়) তবে রেজিএক্সপাইন লাইনটি এতে পরিবর্তন করুন: var re = new RegExp (this.term);
—
ডেভিড রাইডার
জিকুয়েরইউআই স্বয়ংক্রিয়রূপটি ডিফল্টরূপে একটি কেস সংবেদনশীল অনুসন্ধান করে বলে মনে হয়, তাই RegExp অবজেক্টে "i" পতাকা যুক্ত করা বুদ্ধিমান হয়ে যায়। @ ডেভিডরাডার উল্লিখিত হিসাবে রেজেক্সে "^" ব্যবহার করার কোনও কারণ নেই। লাইক:
—
স্যাম
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);
};@ জার্ন জেফেরার এবং @ চিজোর প্রতিক্রিয়াগুলির সংমিশ্রণ।
আমি এটি আরও ভাল পছন্দ করেছি, কারণ এটি পুরো শব্দটির সাথে মেলে।
—
এটপ
এটি ভাল কাজ করে। কেবলমাত্র আইটেমটি.এলবেল প্রতিস্থাপন হচ্ছে। আমার জন্য, আমি আমার পাঠ্য বাক্সে "<strong ..." পাচ্ছিলাম। কেবলমাত্র অন্য পরিবর্তনশীলকে প্রতিস্থাপনের ফলাফল নির্ধারণের ফলে তা সাফ হয়ে গেছে। আপনার ডেটাতে এমন কোনও মান সম্পত্তি রয়েছে যা পাঠ্য বাক্সে রেখে দেয় যদি আপনার এই সমস্যা হবে না।
—
কিজানা উডার্ড
আপনার যদি এমন একটি স্বয়ংক্রিয় পূর্ণতা থাকে যা একাধিক মানকে সমর্থন করে তবে এটি কাজ করে না। কোনও পরামর্শ?
—
লিওরা
আপনার স্ব-পরিপূর্ণ ফলাফলগুলিতে পাঠ্য হাইলাইট করার সহজ উপায়। স্পষ্টতই উপরে লিওরা এবং কিজনার নির্দেশিত বাগগুলি খুঁজে বার করুন
—
adamst85
আপনারা কল করার আগে @ আরএনকুশওয়াহা যে কোনও জায়গায়
—
ব্রায়ান
$().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();
ধন্যবাদ ওরোলো, আমি একাধিক স্থানে স্বতঃপূরণ ব্যবহার করছিলাম এবং একটি কেন্দ্রীয় জায়গা চেয়েছিলাম যেখানে টাইপ করা অক্ষরগুলি দিয়ে শুরু হওয়া ফলাফলের জন্যই আমি পরিবর্তনটি পরিবর্তন করতে পারি এবং এটিই আমার ঠিক প্রয়োজন ছিল!
—
dreamerkumar
ধন্যবাদ। এটি সবার সেরা সমাধান। এটি সংবেদনশীল ক্ষেত্রে কাজ করে।
—
অনিকেত কুলকারনী
এটি এখানে যায়, একটি কার্যকরী পূর্ণ উদাহরণ:
<!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 কীভাবে _আপনার আইটেম কাজ করে তা পরিবর্তন করে।
নীচের কোডটি এই পরিবর্তনটিকে বিবেচনায় নিয়েছে এবং এটিও দেখায় যে কীভাবে আমি জার্ন জাফেরারের 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();
});
আমি যখন '(' এর মতো অক্ষরগুলির সাথে অনুসন্ধান করি তখন এটি ত্রুটির কারণ ঘটায় ("আনকাটড সিনট্যাক্স এরিয়ার: অবৈধ নিয়মিত অভিব্যক্তি: / (স্যাম | এ্যাট | () /: নিরবিচ্ছিন্ন গোষ্ঠী")) যাইহোক রেইগেক্সের সাথে সংঘর্ষ রোধ করে এটিকে সমাধান করার জন্য?
—
আইডান শেচটার
দুর্দান্ত উত্তর! প্রেম করুন যে এটি শর্তগুলি হাইলাইট করে যেখানে তারা উপস্থিত থাকুক না কেন। খুব ঠান্ডা. পোস্ট আপডেট করার জন্য ধন্যবাদ। আমার একটি প্রশ্ন হ'ল আপনি ব্যবহার করেন .ui-মেনু-আইটেম-হাইলাইট শ্রেণি সম্পর্কে। এটি jquery-ui বা গ্রাহকরা দ্বারা সংজ্ঞায়িত করা প্রত্যাশিত? আমি নিজের নিজস্ব উপায়ে স্যুট করতে ক্লাসের নামটি পরিবর্তন করে ফন্ট-ওজনকে সাহসী করে তুলেছি।
—
স্যাম
.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 এর পরিবর্তে DOM ফাংশন ব্যবহার করে
- কেবলমাত্র নির্দিষ্ট স্বতঃপূরণটি প্রভাবিত হয়, সমস্ত নয় not
- 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);
};আপনি ফলোয়িং কোড ব্যবহার করতে পারেন:
liberal এর সংক্ষিপ্ত রূপ:
$.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।
আমার উদাহরণে কিছু সরল কোডে মূল রেন্ডার ফাংশনটিও ব্যবহৃত হয়েছিল
আপনি যদি স্বয়ংক্রিয়ভাবে সম্পূর্ণ ভিন্ন দৃষ্টিভঙ্গি সহ বিভিন্ন জায়গায় প্লাগইন ব্যবহার করতে চান এবং আপনার কোডটি ভাঙতে না চান তবে এটি গুরুত্বপূর্ণ বিষয়।
সাধারণত 6 বছরের পুরানো প্রশ্নের উত্তর না দিয়ে নতুন প্রশ্নের উত্তর দেওয়ার জন্য বা উত্তর ছাড়াই উত্তর দেওয়া ব্যয় করা ভাল।
—
zchrykng
আপনি যদি এর পরিবর্তে 3 য় পক্ষের প্লাগইন ব্যবহার করেন তাহলে, এটি একটি হাইলাইট বিকল্প আছে: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
(বিকল্প ট্যাব দেখুন)
হ্যাঁ আমি এই প্লাগ ইনটি সম্পর্কে সচেতন however তবে, আমরা আমাদের অ্যাপ্লিকেশনটিতে jQueryUI ব্যবহার করছি তাই jQueryUI
—
স্বতঃসম্পূর্ণ
২০১০-০6-২৩ পর্যন্ত jQuery অটোমম্পল প্লাগইনটি jQuery UI স্বতঃসম্পূর্ণ প্লাগইনের পক্ষে অবচয় করা হয়েছে। আরও তথ্যের জন্য bassistance.de/jquery-plugins/jquery-plugin-autocomplete দেখুন
—
শেখ