如何使用javascript在html中搜索数组并输出答案

Question

我是 javascript 新手，我正在用 html 制作一个网站。

我制作了网站标题，并在其旁边放置了表单类型的文本输入和提交类型的按钮。

我想要做的是当我在搜索框中输入一些东西并按下提交时，我希望它输出我将在 html 正文中使用的函数的结果。

到目前为止我得到的代码是：

var button = document.getElementById("button");

var data = ["Jaws, Jaws 1, Jaws 2, Jaws 3, Space Jame, Big Fish, The illusionit"];

button.onclick = function() {
var formInput = document.getElementById(formInput).value;
for (i=0; i<data.length;i++){
    if(data[i].indexOf(formInput) != -1) {
        alert(data[i]);
    }
    else {
        alert("We do not have any data like that. Sorry!");
    }
};

这是java脚本代码，这是我的hmtl代码：

<body>
<div id="head">
    <div id="logo">
        <img src="img/logo.png" style="height:50px;">
    </div>
    <div id="search">
        <form>
            <input type="text" name="search"   class="search" id="formInput">
            <input type="submit" value="OK"    class="button" id="button">
        </form>
    </div>
</div>
<div id="output">
    <script>
    var html = "The outputs are going to be: "
    document.getElementById('output').innerHTML = html;
    </script>
</div>
<div id="footer">
</div>

例如，如果我输入 Jaws，我希望它返回 Jaws , Jaws 1, Jaws 2, Jaws 3

这不起作用任何人都可以建议如何使其工作？ 我知道我可以使用 php 或其他语言，但我只想使用 javascript 和 html

谢谢！！！

Answer 1

您可以使用 javascript 过滤器来获取过滤后的数据

像这样尝试

var formInput = document.getElementById(formInput).value;
var dataList=data.filter(function(x){ return x.indexOf(formInput)>-1; });
for (i=0; i<dataList.length;i++){
  console.log(dataList[i]);
}

你的阵列对我来说看起来不错

尝试像这样保持你的阵列

var data = ["Jaws","Jaws 1","Jaws 2","Jaws 3","Space Jame","Big Fish","The illusionit"];

代替

var data = ["Jaws, Jaws 1, Jaws 2, Jaws 3, Space Jame, Big Fish, The illusionit"];

Answer 2

 var array = ["a","b","c"]; function searchIT(){ var inputVal = document.getElementById("inputTxt").value; console.log(inputVal); if(array.indexOf(inputVal) !== -1){ document.getElementById("result").innerHTML = "The output is : "+ inputVal; } else { document.getElementById("result").innerHTML = "There is no such element"; } }

 <input type="text" id="inputTxt"> <button onclick="searchIT();">Search</button> <div id="result"> </div>

如何使用javascript在html中搜索数组并输出答案

问题描述

2 个解决方案

解决方案1
1 2015-11-12 04:22:42

解决方案2
0 2015-11-12 04:30:39

如何使用javascript在html中搜索数组并输出答案

问题描述

2 个解决方案

解决方案1 1 2015-11-12 04:22:42

解决方案2 0 2015-11-12 04:30:39

解决方案1
1 2015-11-12 04:22:42

解决方案2
0 2015-11-12 04:30:39