Seo-Jun Koh Seo-Jun Koh - 1 year ago 67
HTML Question

Text Box Search / Javascript Function Arrays **not corresponding**

I want the user to "Search" some "Authors" and if they select the one in the database they are sent to a corresponding HTML. Otherwise "No Author Found" displays...

For some reason I cannot wrangle it properly - pls help!

//Search by Author
function searchAuth() {
var search_string = document.getElementById('search_string').value;
var arrayelement = ["John","Stan","Henry","Paul","Samuel"];
for (i=0;i<arrayelement.length;i++) {
if (input == arrayelement.John) {
var itemLink = document.getElementById('demo').innerHTML =
"<a href=''>Your link</a>";
} else if (input == arrayelement.Stan) {
var itemLink = document.getElementById('demo').innerHTML =
"<a href=''>Your link</a>";
}else {
var itemLink = document.getElementById('demo').innerHTML =
"Author not found."

<h3>Search By Author</h3>
<form name="searchTest" onsubmit="return(searchAuth());" action="#">
<input type="text" id="search_string" />
<input type="submit"/>
<p id="demo"></p>

Answer Source

Perhaps you are trying to do things like these..

P.S this is just a demo, for you to start :)

EDIT: added few explanation on some stuffs you might get confuse with. :)

//events once textbox gets out focus
//the events varies on which or where do you want to add the event. it can be on click of a search button or submit button just like in your example.
document.getElementById('search-text-box-id').addEventListener("focusout", function() {
    //searchString gets the textbox value.
    var searchString = document.getElementById('search-text-box-id').value;
    var searchList = ["John","Stan","Henry","Paul","Samuel"];
    //Loop searchList
    for (i=0; i < searchList.length; i++) {
      //i which usually means the index or the key of the array's object(s).
      var searchItem = "";
      //searchList[i] loops its object by getting the index resulting to John, Stan and so on and so forth.
      if (searchString == searchList[i]) {
        searchItem= searchList[i];
        document.getElementById('search-result-container').innerHTML = itemLink + " link";
        //stop looping as the loop found a match.
      else {
      	searchItem = "Author not found.";
        document.getElementById('search-result-container').innerHTML = searchItem;
<label for="search-text-box"></label>
<input type="text" id="search-text-box-id" name="search-text-box" />
<p id="search-result-container"></p>