搜索数组未返回预期结果 - 它不断出现错误

Question

目标：我正在尝试制作一个简单的搜索栏，用于在输入字段中搜索邮政编码并将其与数组中的邮政编码相匹配。目标是创建一个函数来识别数组中是否存在邮政编码。如果是，它将 return 一个声明，否则它将 return 一个不同的声明。

预期结果：

如果在搜索栏中输入的邮政编码与数组中的邮政编码匹配，则会显示该区域提供服务。
如果在搜索栏中输入的邮政编码在数组中不存在，它会显示该区域未提供服务。
如果用户尝试提交空白输入字段，系统会提示您输入邮政编码。

实际结果:

如果在搜索栏中输入的邮政编码与数组中的邮政编码匹配，它将说该区域没有服务。
如果在搜索栏中输入的邮政编码在数组中不存在，它会显示该区域未提供服务。
如果提交空白输入字段，系统会提示输入邮政编码。

我的代码：

var zip = ["19505", "19506", "19507", "19508", "19510", "19511", "19512", "19518","19519", "19522", "19523", "19526", "18056", "19529", "19530", "19533", "19534", "19535", "19536", "19538", "19539", "19540", "19541", "19542", "19543", "19544", "19545", "19547", "19611", "19601", "19602", "19604", "19605", "19606", "19607", "19608", "19550", "19551", "19554", "19555","19559","19560","19562", "19564", "19565","19609", "19567", "19610"];

function validateSearchbox(){ 
    var input = document.getElementById("search-box")
    if(input.value.length > 0){ 
        searchResult();
    } else { 
        document.getElementById("search-result").innerHTML = "Please enter a zip code"; 
    }
};


function searchResult(){ 
    var search = document.getElementById("search-box").value; 
    var index = zip.indexOf("search"); 

    if(index !== -1){ 
        document.getElementById("search-result").innerHTML = "Yes, we do service your area!";
    } else {
            document.getElementById("search-result").innerHTML = "Sorry, we do not service your area!";
        }
};

<div id="search"> 
  <input type ="search" id="search-box" placeholder="Zip Code" maxlength="5"/> 
  <button onClick="validateSearchbox();" id="search-btn"> Search </button> 
</div>

<p id="search-result" style="font-size: 30px; font-weight: 500px;"> </p>

Answer 1

您的意外输出是由于将 indexOf 与字符串 "search" 而不是上一行声明的变量 search 一起使用造成的。

Answer 2

您的代码正在尝试查找字符串 "search" 而不是变量 search 的索引。以下作品：

function searchResult(){ 
  var search = document.getElementById("search-box").value; 
  var index = zip.indexOf(search); // <--- variable instead of string

  if (index !== -1){ 
    document.getElementById("search-result").innerHTML = "Yes, we do service your area!";
  } else {
    document.getElementById("search-result").innerHTML = "Sorry, we do not service your area!";
  }
};

Answer 3

您在 var index = zip.indexOf("search"); 中将“search”作为字符串传递您必须像这样将搜索作为变量传递。

    var search = document.getElementById("search-box").value; 
    var index = zip.indexOf(search); 

    if(index !== -1){ 
        document.getElementById("search-result").innerHTML = "Yes, we do service your area!";
    } else {
            document.getElementById("search-result").innerHTML = "Sorry, we do not service your area!";
        }
};```

Answer 4

您的代码需要在这一行进行更改：这样，代码将搜索所需的 zip 而不是硬编码的 zip“搜索”。

var index = zip.indexOf(search);

使用以下代码，它会尝试搜索字符串“search”并给出索引= -1，因为 Zip 数组中不存在字符串“search”。

var index = zip.indexOf("search");

搜索数组未返回预期结果 - 它不断出现错误

Search of an array is not returning expected result - it keeps coming out false

javascript

arrays

zipcode

indexof

searchbar