Searching an Array with the user input using javascript

Question

I want to search a value in the array. array is predefined with some values. There will be a HTML text box to enter a value. User need to enter the value. If the value entered by user is there in array. it should display "Valued found" or else not found. It should use AJAX. My below code is not working.

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<p>Enter a value: <input type="text" id="carInput" onchange="textChanged()"></p>
<p id="onListText"></p>
<script>
var cars = ["abc", "def", "ghi","jkl"];
var textChanged = function(){
  var inputText = $("#carInput").text();
  if($.inArray(inputText, cars) !== -1){
    $("#onListText").text("Value Found");
    return;
  }
}
</script>
</body>
</html>

@akxlr may he find local cache first, if not found, then query DB? — huan feng
– huan feng, Commented Apr 10, 2015 at 5:24

mohamedrias · Accepted Answer · 2015-04-10 05:11:19Z

1

  var inputText = $("#carInput").text();

This should be

  var inputText = $("#carInput").val();

So your full code will be:

 var cars = ["abc", "def", "ghi","jkl"];
var textChanged = function(){
  var inputText = $("#carInput").val();
  console.log(inputText);
  if($.inArray(inputText, cars) !== -1){
    $("#onListText").text("Value Found");
    return;
  } else {
    $("#onListText").text("Value not Found");
  }
}

  
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p>Enter a value: <input type="text" id="carInput" oninput="textChanged()"></p>
<p id="onListText"></p>

edited Apr 10, 2015 at 5:11

answered Apr 10, 2015 at 5:04

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

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

Comments

Waseem Bepari · Accepted Answer · 2015-04-10 05:11:51Z

1

$("#carInput").text(); should be $("#carInput").val()

text() is the select all the text inside the selected element

val() is the get the val of form control

var cars = ["abc", "def", "ghi", "jkl"];
var textChanged = function() {
  var inputText = $("#carInput").val();
  if ($.inArray(inputText, cars) !== -1) {
    $("#onListText").text("Value Found");
    return;
  } else {
    $("#onListText").text("Value not Found");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Enter a value:
  <input type="text" id="carInput" onchange="textChanged()">
</p>
<p id="onListText"></p>

answered Apr 10, 2015 at 5:11

Waseem Bepari

3362 silver badges9 bronze badges

Comments

mohamedrias · Accepted Answer · 2015-04-10 05:12:22Z

1

Try var inputText = $("#carInput").val(); instead of var inputText = $("#carInput").text();

And use oninput event.

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<p>Enter a value: <input type="text" id="carInput" oninput="textChanged()"></p>
<p id="onListText"></p>
<script>
var cars = ["abc", "def", "ghi","jkl"];
var textChanged = function(){
  var inputText = $("#carInput").val();
  if($.inArray(inputText, cars) !== -1){
    $("#onListText").text("Value Found");
    return;
  }
}
</script>
</body>

edited Apr 10, 2015 at 5:12

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

answered Apr 10, 2015 at 5:09

Muzahid

211 silver badge2 bronze badges

Comments

huan feng · Accepted Answer · 2015-04-10 05:22:41Z

0

If you want to trigger the event only on lost focus, you just replace text() to val()

var inputText = $("#carInput").val(); //replace text() to val()

using onkeyup(or oninput, suggest by @mohamedrias) rather than onchange event is more suitable in your case. onchange need blur to fire the event.

<p>Enter a value: <input type="text" id="carInput" onkeypress="textChanged()"></p>

onkeyup pnlkr

edited Apr 10, 2015 at 5:22

answered Apr 10, 2015 at 5:05

huan feng

8,7043 gold badges40 silver badges66 bronze badges

1 Comment

mohamedrias Over a year ago

Even better, OP can bind just oninput event

Collectives™ on Stack Overflow

Searching an Array with the user input using javascript

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related