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>
4 answers
solution1
1 2015-04-10 05:04:00
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>
solution2
1 2015-04-10 05:09:11
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>
solution3
1 2015-04-10 05:11:51
$("#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>
solution4
0 2015-04-10 05:05:03
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.