Javascript HTML5数组搜索和“从HTML5返回”文本框（如果位于数组中）

debugcn 发表于 Dev

GamerVet

我试图在数组（javascript）中的文本框（html5）搜索值中输入名称，并从文本框中返回值（如果它在数组中）。

基本上，我需要-如果search == arrayelement [i]显示[i] else ...关于从何处开始的任何指导？

达斯汀·泊桑（Dustin Poissant）

您的问题有点令人困惑，但是我猜您有一个名称数组，并且您有一个搜索输入字段，您想要搜索该数组然后得出结果（也许是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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。