Javascript HTML5数组搜索并从HTML5文本框中返回（如果在数组中）答案

【问题标题】：Javascript HTML5 Array search and Return from HTML5 text box if in arrayJavascript HTML5数组搜索并从HTML5文本框中返回（如果在数组中）
【发布时间】：2016-06-03 21:45:59
【问题描述】：

我正在尝试在文本框 (html5) 中输入名称，在数组 (javascript) 中搜索值，如果它在数组中，则从文本框返回值。

基本上我需要 -- if search == arrayelement[i] display [i] else... 关于从哪里开始的任何指导？

【问题讨论】：

你的意思是返回值到另一个文本框吗？
如果搜索到的名称与数组元素匹配，则数组没有返回值
或者我猜另一个文本框中数组的返回值会起作用
创建文本框和一个按钮，分配你的数组，在按钮上onclick调用一个函数说search()，如果找到则返回该函数的数字。
谷歌搜索“javascript 搜索数组”是个不错的起点

标签： javascript arrays html search

【解决方案1】：

您的问题有点令人困惑，但我猜您有一个名称数组，并且您有一个搜索输入字段，您想搜索该数组然后搜索结果（可能是一个 div？）。

var names = ["john", "bob", "kayla", "sam", "elena", "josh", "andrew", "maria"];

function search(){
  var searchFor = $("#search-input").val();
  var searchIndex = names.indexOf(searchFor);
  if(searchIndex == -1)
    $("#search-results").html("no results");
  else
    $("#search-results").html(searchFor);
}
$("#search-input").on("keyup", search);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='search' id='search-input' />
<div id='search-results'></div>

如果您想让每个条目都有自己的 url 并允许部分搜索让这变得更有趣，请尝试以下操作：

var people = [
  {
    name: "John Smith",
    url: "http://example.com/johnsmith"
  },
  {
    name: "John Johnson",
    url: "http://example.com/johnjohnson"
  },
  {
    name: "Bob Thompson",
    url: "http://example.com/bobthompson"
  },
  {
    name: "Smith Sanchez",
    url: "http://example.com/smithsanchez"
  },
  {
    name: "Bob Sanchez",
    url: "http://example.com/bobsanchez"
  }
];
$("#search-input").on("keyup", function(){
  var searchFor = $("#search-input").val().toLowerCase();
  var results = [];
  for(var i=0;i<people.length;i++){
    if(people[i].name.toLowerCase().indexOf(searchFor) > -1)
      results.push("<a href='"+people[i].url+"' target='_blank'>"+people[i].name+"</a>")
  }
  if(results.length == 0)
    $("#search-results").html("No Results Found");
  else
    $("#search-results").html(results.join("<br>"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='search' id='search-input' placeholder='Search' />
<div id='search-results'></div>

【讨论】：

那将是个好主意。下班后我会深入研究这一切。
我实际上是想让上面的代码在记事本中工作。我很难让它运行。我已经包含了库和所有 html 标签，但出现的只是文本框。所有搜索功能都不起作用。
你把JS放在body末尾了吗？
Javascript 库位于末尾的

【解决方案2】：

这是代码

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script>
    var arr = new Array(10);
    arr = [23,14,535,346,54,65,2,1,3,5];
    function search(){
        var i=0;
        var key = document.getElementById("key").value;
        while(i<10){
            if(arr[i]==key){
                document.getElementById("result").value = key;
                break;
            }
            i++;
        }
        if(i==10){
            document.getElementById("result").value = "Not Found!";
        }
    }
</script>
</head>
<body>
    <input type="text" id="key"/>
    <input type="button" onclick="search()" value="Go"/><br/>
    <input type="text" id="result"/>
</body>
</html>

【讨论】：

【解决方案3】：

function myfun() {
  var search_string = document.getElementById('search_string').value;
  var arrayelement = ["item1","item2","item3","item4","item5"];
  for (i=0;i<arrayelement.length;i++) {
	if(search_string==arrayelement[i]){
		var flag=1;
	}
  }
	if(flag==1){
  document.getElementById('demo').innerHTML = "Item found";
	}
	else {
  document.getElementById('demo').innerHTML = "Item not found";
	}
}

<input type="text" id="search_string" />
<button onClick="myfun()">Start</button>
<p id="demo"></p>

【讨论】：

哇，这里看起来不错。当我下班时，我将进入并逐行进行此操作。非常感谢
真的很感谢所有的cmets！