Identifying strings from an array in the input using JavaScript and then displaying the identified string

Question

Identifying strings from an array in the input using JavaScript and then displaying the identified string

Can you help me create a function that will detect if a user types one of the strings from a list and then output which string was typed in the console?

HTML

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

JS

window.onload = function(){
  var inputText = document.getElementById('inputText');
  var stringsToDetect = ["apple", "banana", "orange", "grape"]

  inputText.onkeypress = function (e) {
    if (stringsToDetect.includes(inputText.value)) {
      console.log("User typed: " + inputText.value)
    }           
  };                   
}

javascript arrays input

Answer 1

Answer №1

Consider using the String.indexOf() method along with Array.filter() function.

window.onload = function() {
  var strings = ["string1", "string2", "string3", "string4"];
  /* changed `formula` to `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" />

Answer 2

Consider using the String.indexOf() method along with Array.filter() function.

window.onload = function() {
  var strings = ["string1", "string2", "string3", "string4"];
  /* changed `formula` to `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" />

Answer 3

Answer №2

When fetching an element, make sure to use the correct ID. In this case, the ID of the input should be input, not formula. To correct this mistake, you should check for inclusion in the array instead. Update the code like so:

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

Also, avoid using the keypress event as it won't capture the updated value immediately. Instead, consider using the oninput event.

Edit 1:

You can utilize Array#some to determine 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("The input contains the following string:" + input.value)
    }
  };
}

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

Answer 4

When fetching an element, make sure to use the correct ID. In this case, the ID of the input should be input, not formula. To correct this mistake, you should check for inclusion in the array instead. Update the code like so:

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

Also, avoid using the keypress event as it won't capture the updated value immediately. Instead, consider using the oninput event.

Edit 1:

You can utilize Array#some to determine 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("The input contains the following string:" + input.value)
    }
  };
}

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

Answer 5

Answer №3

You can utilize it in this way:-    
formula.onkeypress = function (e) {
      if (strings.includes(input.value)) {
      console.log("The input contains the string:" + input.value)
      }           
    };

Answer 6

You can utilize it in this way:-    
formula.onkeypress = function (e) {
      if (strings.includes(input.value)) {
      console.log("The input contains the string:" + input.value)
      }           
    };

Answer 7

Answer №4

Upon reviewing your code, it seems there are a few key issues to address:

The id assigned to the input element is incorrect
Utilizing the onkeyup event will allow you to capture the character immediately as it is typed
Ensure you are utilizing the includes() method with array type variables

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" />

Answer 8

Upon reviewing your code, it seems there are a few key issues to address:

The id assigned to the input element is incorrect
Utilizing the onkeyup event will allow you to capture the character immediately as it is typed
Ensure you are utilizing the includes() method with array type variables

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" />

Answer 9

Answer №5

Interested in creating an autocomplete form? Check out this helpful resource: Autocomplete

Answer 10

Interested in creating an autocomplete form? Check out this helpful resource: Autocomplete

Identifying strings from an array in the input using JavaScript and then displaying the identified string

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

PHP AJAX Request Failing to Transfer Files

Building a dynamic attribute management system with vue and vuetify

Tips for establishing conditional guidelines and mandatory fields within Vue?

Creating a Configuration File for POST Requests in NodeJS Express

Dealing with AJAX errors in React components after mounting

Simultaneous asynchronous access to a single object

What is the best method for displaying a radio button as selected based on a variable value?

Pause a YouTube video automatically when the window is not in focus using FancyBox

What is the proper way to import Axios in Vue 3 once you have created a new project using the CLI?

What is the most effective method for displaying an error code when a JavaScript error occurs?

Creating a reduced array based on the contents of the original array

Node.js with Socket.io causes multiple events to be triggered

embedding a time frame within a collection of references

Is there a discrepancy in the value between data and computed properties in Vue components?

Using an expression from the parent controller to disable an item in an AngularJS directive

Transform a PHP array into a JavaScript array with UTF-8 encoding

Can you explain the significance behind the error message "RangeError: Invalid status code: 0"?

What are some tips for utilizing the "bottom-row" slot within the "b-table" component in bootstrap-vue?

Fill the rows of the <Table> using HTML code

Tips for effectively reusing the modal component in Vue.js without encountering re-render issues