Check does an array contains input text on keyUp

Question

I searched about this and all I found is that all answers contains indexof, which for some reason does not work in my option:

I have an array:

var array = ["Sunny","Snowy","Rainy"];
var input = document.getElementById('input').value;

Now When I use indexOf it works only when I input the whole word, I need it in way:

Input: S
Result: Sunny, Snowy
Input: Su
Result: Sunny

Here is the code:

 for (var i = 0; i < array.length; i++) {
            if (input.indexOf(array[i])> -1) {
                console.log("Object with index number "+i+" contains "+input); 
            }
            return;
    }

Just plain javascript without jquery.

i think this link is what you want :stackoverflow.com/questions/23447021/… — pouyan
– pouyan, Commented Mar 6, 2017 at 16:41

mhodges · Accepted Answer · 2017-03-06 17:12:35Z

1

You have your indexOf() operands backwards. input is also a DOM element, and you are asking if the DOM element contains the array element, rather than asking if the DOM element's value is in the array. Here's how you can modify it to work:

var array = ["Sunny", "Snowy", "Rainy"];
var input = document.getElementById('input');

input.addEventListener("input", function() {
  for (var i = 0; i < array.length; i++) {
    if (array[i].indexOf(this.value) > -1) {
      console.log("Object with index number " + i + " contains " + this.value);
    }
  }
});

<input type="text" id="input" />

EDIT -- As per OP's request to use inline keyup event handler and not return any results if input value is empty -- Note: using the keyup event is not advised because it does not capture mouse cut & paste, and unnecessarily fires on modifier keys (shift, ctrl, alt, etc). The input event is more useful here.

var array = ["Sunny", "Snowy", "Rainy"];
var input = document.getElementById('input');

function handleKeyup(elem) {
  // return nothing if empty value in input
  if (elem.value !== "") {
    for (var i = 0; i < array.length; i++) {
      if (array[i].indexOf(elem.value) > -1) {
        console.log("Object with index number " + i + " contains " + elem.value);
      }
    }
  }
}

<input type="text" id="input" onkeyup="handleKeyup(this)" />

edited Mar 6, 2017 at 17:12

answered Mar 6, 2017 at 16:41

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

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

6 Comments

mhodges Over a year ago

@pooyan Array.prototype.indexOf() is different than String.prototype.indexOf()

BestBudds Over a year ago

Otherwise this is not working While i type in input it is not doing a thing and after I delete it all I get Object with index number 0 contains

mhodges Over a year ago

@BestBudds Added working demo with same code. Can you try to explain what is not working for you? Or do you want it to return no results if the input field is empty? Technically, every element contains "", so if you empty the field, it will return all results. This is the desired behavior in 99% of cases, but if you don't want it to work like that, just let me know and I can update my code

BestBudds Over a year ago

I tried to call function onkeyup="functionName()" on input and then do this for...

pouyan Over a year ago

@mhodges i think it would be better that at first check that your input is not empty.

|

Collectives™ on Stack Overflow

Check does an array contains input text on keyUp

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related