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

Question

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>

Icewine · Accepted Answer · 2019-09-26 04:34:21Z

1

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>

edited Sep 26, 2019 at 4:34

answered Sep 26, 2019 at 2:57

Icewine

1,8511 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

clestcruz Over a year ago

Is there a way to check for a partial match. I have to complete the whole string in order for it to add a class. Lets say I type in just jo, it will search the list for strings or data-attribute containing just jo instead of completing the whole string john. Since you are using an if statement. It will check an exact match before adding the class

Icewine Over a year ago

yes, I have added a * in the find data-name. Though it is still case sensitive.

clestcruz Over a year ago

Didn't know about that, now I just need to add a condition to remove the display class if there isn't any matches (partial or exact)

Icewine Over a year ago

it should do that already. it clears all display class on each keydown then reapplies them based on the search.

clestcruz Over a year ago

I'm getting a syntax Uncaught Error: Syntax error, unrecognized expression: [data-name*=@] if started the text or with an @ character or any kind of special character. Is there a way to allow it to accept special characters?

|

Abhishek Bag · Accepted Answer · 2019-09-26 02:49:51Z

1

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..

edited Sep 26, 2019 at 2:49

answered Sep 26, 2019 at 2:39

Abhishek Bag

1445 bronze badges

4 Comments

clestcruz Over a year ago

Is there a way to check for a partial match? It seems I need to complete the whole string. Lets say If I just type jo it will search all the values inside the array that has jo inside.

Abhishek Bag Over a year ago

Yes sure you can do that also. You can then keep both the conditions one which you added earlier and also the condition which i had modifed to and keep both the conditions in an or expression then it should work both ways.

clestcruz Over a year ago

I can't seem to figure how I can obtain a partial match only

Abhishek Bag Over a year ago

You have to use both elements.includes($('.task-label input').val()) and $('.task-label input').val().includes(elements) in an OR expression so that you can check if the single names in your pre defined list of names exist some where in user input as well as if the whole user input partially matches with any of the pre defined names. Can you post your modified code?

Murali Nepalli · Accepted Answer · 2019-09-26 03:14:39Z

1

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

edited Sep 26, 2019 at 3:14

answered Sep 26, 2019 at 2:52

Murali Nepalli

1,61811 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related