मैं यह पता लगाने की कोशिश कर रहा हूं कि मैं उपयोगकर्ता द्वारा दिए गए इनपुट पर आंशिक मिलान आधार कैसे कर सकता हूं। किसी भी आंशिक मिलान के लिए उस मान inside की जांच करें array के भीतर इनपुट, फिर एक वर्ग जोड़ें display
उदाहरण के लिए यदि मैं निम्नलिखित इनपुटबॉक्स के अंदर टाइप करता हूं:
वेब एप्लिकेशन बनाएं जॉन जेम्स
यह सरणी के अंदर किसी भी आंशिक मिलान के लिए सभी मानों को अंदर लाएगा। फिर display नामक एक वर्ग जोड़ने के लिए सभी name कक्षाओं के माध्यम से लूप करें। यदि एक भी मेल नहीं है तो यह वर्ग display को हटा देगा
$(".task-label input").on("change keyup paste", function(){
let handles = ['john', 'jake', 'james'];
for(let elements of handles ) {
if (elements.includes($('.task-label input').value())) {
$('.name-'+ elements).addClass();
} else {
console.log('no match');
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="task-label">
<input id="name" type="text" name="name">
</div>
<ul class="name-list">
<li id="john" class="name name-john">@John</li>
<li id="jake" class="name name-jake">@Jake</li>
<li id="alex" class="name name-alex">@Alex</li>
<li id="allison" class="name name-allison">@Allison</li>
</ul>3 जवाब
अगर मैं तुम होते तो मैं यह कैसे करता।
सबसे पहले मैं सूची में कक्षाओं को डेटा-विशेषताओं में बदल दूंगा। यह इसे बहुत साफ और खोजने में आसान बनाता है।
नोट: यह अपरकेस/लोअरकेस को ध्यान में नहीं रखता है। काम करने के लिए आपको थोड़ा और कोड लागू करने की आवश्यकता है।
कोड पर टिप्पणी की गई है और यदि आपके कोई प्रश्न हैं तो कृपया पूछें।
$(".task-label input").on("change keyup paste", function() {
// check for special characters
var letters = /^[0-9a-zA-Z]+$/;
// get input and convert to array
var searchFor = $(this).val().split(" ");
// clear the display class before a new search to reset
$(".name-list").find('li').removeClass("display");
// search the list from the elements in the array
for(var el of searchFor){
var name = "[data-name*="+el+"]";
// make sure not empty or special char before finding the name
if(el.match(letters)){
$(".name-list").find(name).addClass("display");
}
}
});.display {
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="name-list">
<li id="john" class="name" data-name="john">@John</li>
<li id="jake" class="name" data-name="jake">@Jake</li>
<li id="alex" class="name" data-name="alex">@Alex</li>
<li id="allison" class="name" data-name="allison">@Allison</li>
</ul>
<div class="task-label">
<input id="name" type="text" name="name">
</div>टेक्स्ट इनपुट का मान प्राप्त करने के लिए jQuery फ़ंक्शन का नाम वैल () है, मान नहीं ()। वैसे भी आपको इसका मूल्य प्राप्त करने के लिए jQuery का उपयोग करने की आवश्यकता नहीं है। हैंडलर के अंदर बस "this.value" देखें। निम्नलिखित कार्यान्वयन आंशिक मैचों के लिए जाँच करता है और यह मामला असंवेदनशील भी है।
$(".task-label input").on("change keyup paste", function(){
let handles = ['john', 'jake', 'james'];
for(let elements of handles ) {
if (elements.includes(this.value.toLowerCase())) {
console.log("matched with " + elements);
$('.name-'+ elements).addClass();
}else {
console.log("no-match");
}
}
})
आप अपने समाधान के साथ लगभग सही हैं, आपको बस इस भाग elements.includes($('.task-label input').val()) को $('.task-label input').val().includes(elements) में बदलने की आवश्यकता है क्योंकि यदि वे पूर्व परिभाषित नाम उपयोगकर्ता इनपुट में कहीं भी मौजूद हैं तो आप कक्षा जोड़ देंगे। उम्मीद है की यह मदद करेगा..