使用javascript搜索具有用户输入的数组

Searching an Array with the user input using javascript

本文关键字：输入 数组 用户 javascript 搜索 使用      更新时间：2023-09-26

我想在数组中搜索一个值。数组是用一些值预定义的。将有一个HTML文本框来输入值。用户需要输入值。如果用户输入的值在数组中。它应该显示"已找到值"或未找到值。它应该使用AJAX。我下面的代码不起作用

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

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

这应该是

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

所以你的完整代码是：

 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>

$("#carInput").text();应为$("#carInput").val()

text()是选择所选元素内的所有文本

val()是表单控件的获取值

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>

尝试var inputText = $("#carInput").val();而不是var inputText = $("#carInput").text();

并使用oninput事件。

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

如果只想在失去焦点时触发事件，只需将text（）替换为val（）

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

在您的情况下，使用onkeyup（或oninput，由@mohamedrias建议）而不是onchange事件更合适。onchange需要blur来启动事件。

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

onkeyup pnlkr

相关文章：