JavaScript - Detect string from array in input and output the string

Question

I want to detect if a user types one of the strings of my list and then output in what string the user typed in the console.

HTML

<input id="input"></input>

JS

window.onload = function(){
  var input = document.getElementById('formula');
  var strings = ["string1", "string2", "string3", "string4"]

  formula.onkeypress = function (e) {
    if (input.value.includes(strings)) {
      console.log("Input contains a the string:" + string???)
    }           
  };                   
}

Possible duplicate of [How to check if a string array contains one string in JavaScript?](https://stackoverflow.com/questions/12623272/how-to-check-if-a-string-array-contains-one-string-in-javascript) — TAHA SULTAN TEMURI, Jul 25 '18 at 11:17

score 1 · Answer 1 · answered Jul 25 '18 at 11:34

Try using String.indexOf() and Array.filter()

window.onload = function() {
  var strings = ["string1", "string2", "string3", "string4"];
  /* replaced `formula` with `input` */
  document.getElementById('input').oninput = function(e) {
    var find = this.value;
    if (0 < find.length) {
      var matches = strings.filter(function(s) {
        return -1 !== s.indexOf(find);
      });
      console.log('find string', find, ', matches found', matches);
    }
  };
};

<input id="input" />

31piy · Accepted Answer · 2018-07-25T11:45:13.987

You are fetching element by the wrong ID. The ID of the input is input, and not formula. Ignoring this typo, you need to check the inclusion in the array instead. Replace this:

if (input.value.includes(strings)) {

with this:

if (strings.includes(input.value)) {

Additionally, using keypress event doesn't serve the purpose as the updated value will be fetched after you press one more key. Use oninput instead.

Edit 1:

You can use Array#some to check if the input value contains any string from the array.

window.onload = function() {
  var input = document.getElementById('input');
  var strings = ["string1", "string2", "string3", "string4"]

  input.oninput = function(e) {
    if (strings.some(str => input.value.includes(str))) {
      console.log("Input contains a the string:" + input.value)
    }
  };
}

<input id="input"></input>

Thanks! Right now I have to write exactly "string1" to execute, but how do I make so it executes when the input contains "string1" for example if I type "some words string1"? — Tim, Jul 25 '18 at 11:42

score 0 · Answer 3 · answered Jul 25 '18 at 11:17

0

use like it:-    
formula.onkeypress = function (e) {
      if (strings.includes(input.value)) {
      console.log("Input contains a the string:" + input.value)
      }           
    };

answered Jul 25 '18 at 11:17

Sandeep Bangarh

12
5

score 0 · Answer 4 · answered Jul 25 '18 at 11:18

There are several issues in your code:

The id is incorrect for input element
You need to use onkeyup event to get the immediately typed character
You need to use includes() in array type variable.

window.onload = function(){

var input = document.getElementById('formula');

var strings = ["string1", "string2", "string3", "string4"]

input.onkeyup = function (e) {
  if (strings.includes(input.value)) {
  console.log("Input contains a the string:" + input.value)
  }           
};         

}

<input id="formula" />

score 0 · Answer 5 · answered Jul 25 '18 at 11:21

0

If you want to make an autocomplete form : Autocomplete

answered Jul 25 '18 at 11:21

Ioannis Perpirakis

11
5

JavaScript - Detect string from array in input and output the string

5 Answers5