CODEWITHSUNDEEP
javascripthtmlajax
Muneeb K
Muneeb K

Reputation: 487

Searching an Array with the user input using javascript

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>

Upvotes: 0

Views: 87

Answers (4)

huan feng
huan feng

Reputation: 8623

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

Upvotes: 0

Muzahid
Muzahid

Reputation: 21

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>

Upvotes: 1

Waseem Bepari
Waseem Bepari

Reputation: 336

$("#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>

Upvotes: 1

mohamedrias
mohamedrias

Reputation: 18566

  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>

Upvotes: 1

Related Questions