मैं यह पता लगाने की कोशिश कर रहा हूं कि मैं उपयोगकर्ता द्वारा दिए गए इनपुट पर आंशिक मिलान आधार कैसे कर सकता हूं। किसी भी आंशिक मिलान के लिए उस मान 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>
0
clestcruz 26 सितंबर 2019, 05:27

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>
1
Icewine 26 सितंबर 2019, 04:34

टेक्स्ट इनपुट का मान प्राप्त करने के लिए 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");
     }         
  }  
})
1
Murali Nepalli 26 सितंबर 2019, 03:14

आप अपने समाधान के साथ लगभग सही हैं, आपको बस इस भाग elements.includes($('.task-label input').val()) को $('.task-label input').val().includes(elements) में बदलने की आवश्यकता है क्योंकि यदि वे पूर्व परिभाषित नाम उपयोगकर्ता इनपुट में कहीं भी मौजूद हैं तो आप कक्षा जोड़ देंगे। उम्मीद है की यह मदद करेगा..

1
Abhishek Bag 26 सितंबर 2019, 02:49