JavaScript搜索栏结果的数量限制与排序优化需求

针对你提出的两个优化需求，我们可以通过调整搜索逻辑来实现：

核心修改思路 #

1. 先筛选再排序：不再逐个判断显示，而是先计算所有符合距离要求的条目，按距离排序后取前10条
2. 统一控制显示状态：每次搜索时先隐藏所有卡片，再只显示选中的结果，避免状态混乱

修改后的完整代码 #

JavaScript代码 #

const userCardTemplate = document.querySelector("[data-user-template]")
const userCardContainer = document.querySelector("[data-user-cards-container]")
const searchInput = document.querySelector("[data-search]")

let users = []

searchInput.addEventListener("input", e => {
  const value = e.target.value.trim()
  const xy = value.split(/\s+/).filter(item => item) // 处理多空格分隔的情况

  // 先隐藏所有卡片，重置显示状态
  users.forEach(user => user.element.classList.add("hide"))

  // 输入格式不符合（不是两个有效数字）或长度不足时直接返回
  if (xy.length !== 2 || isNaN(parseFloat(xy[0])) || isNaN(parseFloat(xy[1])) || value.length < 4) {
    return
  }

  const targetX = parseFloat(xy[0])
  const targetY = parseFloat(xy[1])

  // 计算符合条件的用户及其距离，排序后取前10
  const filteredUsers = users.map(user => {
    const distance = Math.sqrt(
      Math.pow(targetX - parseFloat(user.x), 2) +
      Math.pow(targetY - parseFloat(user.y), 2)
    )
    return { ...user, distance }
  })
  .filter(item => item.distance <= 1) // 筛选距离≤1的条目
  .sort((a, b) => a.distance - b.distance) // 按距离从小到大排序
  .slice(0, 10) // 仅保留前10条结果

  // 显示筛选后的结果
  filteredUsers.forEach(user => user.element.classList.remove("hide"))
})

fetch("https://raw.githubusercontent.com/ucc23/ucc/main/test.json")
  .then(res => res.json())
  .then(data => {
    users = data.map(user => {
      const card = userCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector("[data-header]")
      header.textContent = user.name
      card.classList.add('hide')
      userCardContainer.append(card)
      return {
        name: user.name,
        x: user.x,
        y: user.y,
        element: card
      }
    })
  })

CSS代码（无修改） #

.user-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .25rem;
  margin-top: 1rem;
}

.card {
  border: 1px solid black;
  background-color: white;
  padding: .5rem;
  text-align: center;
}

.card > .header {
  margin-bottom: .25rem;
}

.hide {
  display: none;
}

HTML代码（无修改） #

<div class="search-wrapper">
  <input type="search" id="search" data-search>
</div>
<div class="user-cards" data-user-cards-container></div>
<template data-user-template>
  <div class="card">
    <div class="header" data-header></div>
  </div>
</template>

关键修改说明 #

• 输入处理优化：使用split(/\s+/)兼容多空格分隔的场景，同时增加数字有效性判断，避免计算时出现报错
• 排序与筛选逻辑：先为所有用户计算距离，筛选出符合条件的条目后按距离升序排序，最后截取前10条结果
• 显示状态控制：每次搜索先统一隐藏所有卡片，再单独显示选中的结果，确保页面状态不会出现混乱

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