CODEWITHSUNDEEP
javascriptjqueryhtml
clestcruz
clestcruz

Reputation: 1111

How do I check for values or partical within an array using an input?

I'm trying to figure how I can do a partial match base on input given by user. Cross check that value inside the input within the array for any partial matches, then add a class display

For example if I type inside the inputbox the following:

Build Web Application John James

It will fetch all the values inside for any partial matches inside the array. Then loop through all the name classes to add a class called display. If there isn't a single match it will then remove the class 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>

Upvotes: 0

Views: 59

Answers (3)

Icewine
Icewine

Reputation: 1851

If i was you this is how i would do this.

First i would change the classes in the list to data-attributes. This makes it much cleaner and easier to search.

Note: this does not take into account Uppercase/Lowercase. You need to implement a little more code for that to work.

The code is commented and if you have questions please ask.

$(".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>

Upvotes: 1

Murali Nepalli
Murali Nepalli

Reputation: 1618

The name of the jquery function to get the text input's value is val(), not value(). Anyways you need not to use jquery to get it's value. Just refer to "this.value" inside the handler. The following implementation checks for the partial matches and it's case insensitive too.

$(".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");
     }         
  }  
})

Upvotes: 1

Abhishek Bag
Abhishek Bag

Reputation: 134

You are almost right with your solution you just need changing this part elements.includes($('.task-label input').val()) to $('.task-label input').val().includes(elements) because if those pre defined names exist anywhere in the user input then you would add the class. Hope this helps..

Upvotes: 1

Related Questions