个人中心
gpt4 book ai didi

javascript - 在搜索输入中找不到项目时显示消息 - JavaScript

转载 作者：行者123 更新时间：2023-12-03 08:45:19 26 4
gpt4 key购买 nike

我是 JavaScript 新手，正在致力于创建基本应用程序。如果没有找到与用户在搜索输入中输入的匹配名称的联系人，我试图显示“未找到”消息。该应用程序循环遍历我的联系人数组，但有时仍会显示“未找到联系人”消息。我知道这是由于我的条件语句的“else”语句当它循环遍历数组中的对象并且用户输入与当前所在的特定对象不匹配时造成的。默认情况下，“未找到”消息最终始终显示，因为数组中其他对象的“名称”属性在循环遍历对象时将与用户搜索输入不匹配。

我想知道的是，如何让消息仅在之后显示循环遍历我的联系人数组中的所有对象名称但没有找到任何匹配项？我觉得我错过了一些简单的东西。如果循环找不到匹配项，我是否可以返回一个值，以便在该值返回时显示消息？

额外问题:此外，如果至少有几个字符与用户搜索输入相匹配，如何获取联系信息以显示姓名？例如:用户输入“Dav”，我的联系人姓名之一是“David Smith”。

如果我需要更清楚，请告诉我!

这是我的应用程序的 HTML 和 JS...

HTML:

<body>

  <header>Address Book</header>

  <div id="searchButton">
  <input name="searchInput" type=text id="searchInput"><button id="button">Search</button>
  </div>

  <h2 id="notFound"></h2>

  <ul id="contactInfo">
    <li>Name:<span id="contactName"></span></li>
    <li>Phone:<span id="contactNumber"></span></li>
    <li>E-mail:<span id="contactEmail"></span></li>
  </ul>

    <script src="js/index.js"></script>
</body>

在这个问题中我关注的 JavaScript 部分:

//Displays #notFound
    function notFound() {
      var notFound = document.getElementById("notFound");
      notFound.innerHTML = "Person not found in Address Book";
    }

AddressBook.prototype.searchContains = function() {
  var searchInput = document.getElementById("searchInput").value;
  for (var i = 0; i < this.contacts.length; i++) {
    //if name is in address book
    if (searchInput === this.contacts[i].name) {
      this.contacts[i].listHTML();
      break;
    } else {
      notFound();
    }    
  }
};

如果需要的话，这里是所有的 JavaScript 供引用:

//contact object
function Contact (name, number, email) {
  this.name = name;
  this.number = number;
  this.email = email;
}


//Display's contact information in list spans
Contact.prototype.listHTML = function() {
  var contactName = document.getElementById("contactName");
  var contactNumber = document.getElementById("contactNumber");
  var contactEmail = document.getElementById("contactEmail");
  contactName.innerHTML = this.name;
  contactNumber.innerHTML = this.number;
  contactEmail.innerHTML = this.email;
};

//Displays #notFound
function notFound() {
  var notFound = document.getElementById("notFound");
  notFound.innerHTML = "Person not found in Address Book";
}

//address book object
function AddressBook() {
  this.contacts = [];
}

//add contact function 
AddressBook.prototype.add = function(contact) {
  this.contacts.push(contact);
};

//fucntion to check to see if address book object contains user search
AddressBook.prototype.searchContains = function() {
  var searchInput = document.getElementById("searchInput").value;
  for (var i = 0; i < this.contacts.length; i++) {
    //if name is in address book
    if (searchInput === this.contacts[i].name) {
      this.contacts[i].listHTML();
      break;
    } else {
      notFound();
    }    
  }
};

//contacts
var roman = new Contact("Roman Kozak", "412-812-1216", "romankozakjr@gmail.com");
var lauren = new Contact("Lauren Kozak", "724-544-5376", "kozaklauren@gmail.com");

//creation of Address Book object
var addressBook = new AddressBook();

addressBook.add(roman);
addressBook.add(lauren);

//When name entered in search box input and search button is clicked
var searchInput = document.getElementById("searchInput").value;
var button = document.getElementById("button");
button.addEventListener("click", function(){
  addressBook.searchContains();
});

最佳答案

更改此函数的 searchContains 函数:

AddressBook.prototype.searchContains = function() {
  // Erases the not found message of a previous search attempt
  // (you could move this to a function if you'd like to)
  var notFound = document.getElementById("notFound");
  notFound.innerHTML = "";

  var searchInput = document.getElementById("searchInput").value;
  for (var i = 0; i < this.contacts.length; i++) {
    //if name is in address book, list and then exit the search function
    if (searchInput === this.contacts[i].name) {
      this.contacts[i].listHTML();
      return;
    }    
  }
  // If the execution reaches this point, it means that the search value
  // hasn't been found
  notFound();
};

至于奖励问题，您可以尝试使用 indexOf函数，将 if 语句中的条件替换为如下内容

this.contacts[i].name.indexOf(searchInput) != -1

关于javascript - 在搜索输入中找不到项目时显示消息 - JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32917192/

26 4 0
文章推荐： javascript - 按属性对数组中的对象进行分组
文章推荐： python - 如何在设计 pandas DataFrame 时使索引从 1 开始
文章推荐： amazon-web-services - AWS : What is the relationship between S3 bucket policies and user policies?
文章推荐： javascript - 动态插入 HTML 行，jQuery 不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com