如何修复列表搜索仅匹配全名问题并实现仅输入姓氏即可添加对应人员至其他列表？

Hey there! Let's get this sorted out. The core issue is that your listName function was only checking for an exact full name match, which is why entering just a last name (like 'Gabrielle') couldn't find 'Agne Gabrielle'. We'll adjust the matching logic and fix a small HTML issue too.

Step 1: Fix the HTML ID Conflict #

First, your HTML has a duplicate id="button" on both a <div> and the <button> itself. This will cause issues with event binding. Let's fix that:

<div class="container mt-5">
 <input type="text" id="the-filter" placeholder="Search For..." />
 <div class="list-container container">
 <ul id="myList" class="list-group">
 </ul>
 </div>
 <div id="button-container"> <!-- Updated this id to avoid conflict -->
 <button class=" btn btn-primary btn-lg btn-block" id="button">Click</button>
 </div>
 </div>
 <div class="container">
 <ul id="the-list" class="list-group list">
 <li class="list-group-item">Adele Ak</li>
 <li class="list-group-item">Agne Gabrielle</li>
 <li class="list-group-item">Alex Thomson</li>
 <li class="list-group-item">Alice</li>
 <li class="list-group-item">Anderson</li>
 <li class="list-group-item">Anna</li>
 </ul>
 </div>

Step 2: Updated JavaScript Code #

Here's the revised JS with the matching logic fixed, plus some improvements to avoid duplicate entries:

const input = document.getElementById("the-filter");
const list = document.getElementById('the-list');
const button = document.getElementById("button");
const element = document.querySelector(".main-div"); // Note: This element isn't in your HTML, double-check your layout
const li = document.getElementsByClassName('list-group-item');
const items = document.getElementsByClassName('list-group-item');
const newList = document.querySelector('#myList');
const listDiv = document.querySelector('.list-container');

button.addEventListener('click', listName);

function listName() {
 // Adjust visibility (remove or modify if .main-div doesn't exist)
 if (element) element.style.visibility = "hidden";
 listDiv.style.visibility = "visible";
 
 const inputTrimmedLower = input.value.trim().toLocaleLowerCase();
 input.value = "";
 input.focus();

 if (!inputTrimmedLower) return;

 // Prevent duplicate entries in the new list
 const isAlreadyAdded = [...newList.children].some(item => 
   item.textContent.trim().toLocaleLowerCase() === inputTrimmedLower
 );
 if (isAlreadyAdded) {
   console.log(`${inputTrimmedLower} is already listed`);
   return;
 }

 // Find matching person by full name or partial (first/last name)
 let matchedFullName = null;
 for (const lis of items) {
   const fullNameLower = lis.textContent.trim().toLocaleLowerCase();
   // Check if input is part of the full name, or matches any individual name part
   if (fullNameLower.includes(inputTrimmedLower) || fullNameLower.split(' ').includes(inputTrimmedLower)) {
     matchedFullName = lis.textContent.trim();
     break;
   }
 }

 if (matchedFullName) {
   const newItem = document.createElement("li");
   newItem.classList.add("list-group-item");
   newItem.append(matchedFullName);
   newList.prepend(newItem);
 } else {
   console.log(`No matching person found for "${inputTrimmedLower}"`);
 }
}

input.addEventListener('keyup', search);

function search() {
 const inputTrimmedLower = input.value.trim().toLocaleLowerCase();
 for (let i = 0; i < li.length; i++) {
   const nameLower = li[i].textContent.trim().toLocaleLowerCase();
   // Simplified search: show items where input is part of the name
   li[i].style.display = nameLower.includes(inputTrimmedLower) ? "" : "none";
 }
}

Key Changes Explained #

• Fixed duplicate ID: Renamed the button container div to ensure the click event binds correctly to the button.
• Improved name matching:
  • Replaced exact full-name checks with includes() and split() logic, so entering a first name, last name, or partial name will find matches.
  • Added a check to prevent adding the same person multiple times to the new list.
• Simplified search function: Removed redundant uppercase checks (we're already using lowercase for comparisons) to clean up the code.
• Added fallback feedback: Logs a message if no matching person is found, making it easier to debug.

Note: I noticed you reference .main-div in your JS, but that element isn't in your provided HTML. You'll want to either add that div to your layout or adjust the visibility logic to match your actual page structure.

内容的提问来源于stack exchange，提问作者user7946798