JavaScript中实现用户输入与数组数据高效匹配的教程

const searchTerm = input.value.trim().toLowerCase(); // 获取用户输入并转换为小写
let matches = cities.filter(city => city.toLowerCase() === searchTerm);
// 如果 matches 数组的长度大于0，则表示有匹配项
if (matches.length > 0) {
  // 找到匹配项
} else {
  // 没有找到匹配项
}

const input = document.querySelector('#myInput');
const areaCovered = document.querySelector('#areaCovered');
const areaNotCovered = document.querySelector('#areaNotCovered');
const fillArea = document.querySelector('#fillArea');
// ... 其他DOM元素

document.querySelector('#search-from').addEventListener('submit', e => {
  e.preventDefault(); // 阻止表单默认提交行为
  // ... 搜索逻辑
});

// 1. 缓存DOM元素和城市列表
const input = document.querySelector('#myInput');
const areaCovered = document.querySelector('#areaCovered');
const areaNotCovered = document.querySelector('#areaNotCovered');
const fillArea = document.querySelector('#fillArea'); // 用于提示用户输入
const cities = ["Banda Aceh", "Bandar Lampung", "Banyuwangi", "Bandung", "Bali", "Batam", "Batu", "Bekasi", "Bengkulu", "Binjai", "Blitar", "Bogor", "Bukittinggi", "Cimahi", "Cirebon", "Denpasar", "Depok", "Dumai", "Gunungsitoli", "Jakarta", "Jambi", "Kediri", "Langsa", "Lhokseumawe", "Lombok", "Lubuklinggau", "Madiun", "Magelang", "Malang", "Medan", "Metro", "Mojokerto", "Padang", "Padang Sidempuan", "Padangpanjang", "Pagar Alam", "Palembang", "Pangkal Pinang", "Pariaman", "Pasuruan", "Payakumbuh", "Pekalongan", "Pekanbaru", "Pematangsiantar", "Prabumulih", "Prigi", "Probolinggo", "Sabang", "Salatiga", "Sawahlunto", "Semarang", "Serang", "Sibolga", "Solo", "Subussalam", "Sukabumi", "Sumbawa", "Sungaipenuh", "Surabaya", "Surakarta", "Tangerang", "Tangerang Selatan", "Tanjungbalai", "Tanjungpinang", "Tasikmalaya", "Tebing Tinggi", "Tegal", "Yogyakarta"];

// 2. 绑定表单提交事件
document.querySelector('#search-from').addEventListener('submit', e => {
  e.preventDefault(); // 阻止表单默认提交行为，避免页面刷新

  // 3. 获取用户输入并进行预处理
  const searchTerm = input.value.trim().toLowerCase();

  // 4. 重置所有提示信息的显示状态
  fillArea.style.display = 'none';
  areaCovered.style.display = 'none';
  areaNotCovered.style.display = 'none';

  // 5. 检查输入是否为空
  if (!searchTerm) {
    fillArea.style.display = 'block'; // 显示“请填写目的地”提示
    return; // 结束函数执行
  }

  // 6. 使用 filter() 方法进行匹配
  let matches = cities.filter(city => city.toLowerCase() === searchTerm);

  // 7. 根据匹配结果更新UI
  if (matches.length > 0) {
    areaCovered.style.display = 'block'; // 显示“我们覆盖您的区域”
  } else {
    areaNotCovered.style.display = 'block'; // 显示“我们尚未覆盖您的区域”
  }
});

<div class="HeadlineSearchContainer">
  <div class="SearchCharacterStyle">
    <!-- 将非标准的 <h> 标签改为标准的 <h2> -->
    <h2>SEARCH FOR AREA COVERANGE</h2>
  </div>
  <div id="mySearch" class="searchbox_box">
    <!-- 为表单添加 id，便于 JavaScript 绑定事件 -->
    <form autocomplete="off" name="myForm" id="search-from">
      <div class="autocomplete">
        <input id="myInput" type="text" name="city" placeholder="Enter Your Destination City">
        <i class="searchbutton"></i>
      </div>
      <!-- 将 input type="button" 改为 button type="submit" -->
      <button type="submit">Search</button>
      <div class="searchrespond" id="searchRespond">
        <!-- 将非标准的 <h> 标签改为标准的 <h2> -->
        <h2 id="areaCovered">YES! We cover your area destination</h2>
        <h2 id="areaNotCovered">We don't cover your area destination yet</h2>
        <h2 id="fillArea">Please fill your area destination first</h2>
      </div>
    </form>
  </div>
</div>

.HeadlineSearchContainer {
  position: relative;
  top: 100px;
  margin: auto;
  height: 159px;
}

.SearchCharacterStyle {
  font-family: Roboto;
  font-size: 12px;
  line-height: 24.82px;
  text-align: left;
}

.searchrespond {
  font-family: Roboto;
  font-size: 12px;
  line-height: 24.82px;
  text-align: left;
}

/* 初始状态下所有提示信息都隐藏 */
#areaCovered {
  display: none;
}

#areaNotCovered {
  display: none;
}

#fillArea {
  display: none;
}

.autocomplete {
  width: 300px;
}