javascript - 如何在 JavaScript 中将用户输入与数组数据进行匹配

Question

我刚开始学习 HTML、JavaScript 和 CSS。我被这段 JavaScript 代码困住了。

我试图将搜索栏上的用户输入与我已经准备好的一些城市数组列表进行匹配，当搜索结果匹配时，脚本会将元素的显示样式更改为显示其搜索值的结果，但到目前为止结果总是显示错误值。

有没有更好的方法来做到这一点？我的代码有问题吗？

 function searchRespond() {

    if (document.getElementById("myInput").value.match(cities))
    {
      document.getElementById("areaCovered").style.display = "block";
    }

    else {
      document.getElementById("areaNotCovered").style.display = "block";
      document.getElementById("searchResult").innerHTML = document.getElementById("myInput").value;
    }
  }
  var 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"];

 .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;
  }

<div class="HeadlineSearchContainer">
  <div class="SearchCharacterStyle">
    <h>SEARCH FOR AREA COVERANGE</h>
  </div>
  <div id="mySearch" class="searchbox_box">
    <form autocomplete="off" name="myForm">
      <div class="autocomplete" style="width:300px;">
        <input id="myInput" type="text" name="city" placeholder="Enter Your Destination City">
        <i class="searchbutton"></i>
      </div>
      <input type="button" formtarget="_new" onclick="searchRespond()" name="input" value="Search">
      <div class="searchrespond" id="searchRespond">
        <h id="areaCovered">YES! We cover your area destination</h>
        <h id="areaNotCovered">We don't cover your area destination yet
          <p id="searchResult"></p>
        </h>
        <h id="fillArea">Please fill your area destination first</h>
      </div>
    </form>
  </div>
</div>

Answer 1

要执行您需要的操作，您可以使用 filter()将用户的输入与数组中的值相匹配。您最好执行不区分大小写的匹配，这可以通过将两个值转换为相同的大小写来完成。

请注意，此逻辑在逻辑运行之前将通知设置为隐藏，以便删除先前的搜索状态。

此外，我对代码进行了一些改进。首先，我将相关元素存储在变量中，而不是每次都访问 DOM。这稍微提高了性能，并且使代码更容易阅读。我还用过addEventListener()在 HTML 中绑定(bind)事件而不是内联事件处理程序，这是不好的做法，不应使用。最后我转换了<h>元素到<h2 />在这个演示中，因为没有 <h> HTML 中的元素。

const input = document.querySelector('#myInput');
const areaCovered = document.querySelector('#areaCovered');
const areaNotCovered = document.querySelector('#areaNotCovered');
const searchResult = document.querySelector('#searchResult');
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"];

document.querySelector('#search-from').addEventListener('submit', e => {
  e.preventDefault();
  const searchTerm = input.value.trim().toLowerCase();

  fillArea.style.display = 'none';
  areaCovered.style.display = 'none';
  areaNotCovered.style.display = 'none';
  
  if (!searchTerm) {
    fillArea.style.display = 'block';
    return;
  }

  let matches = cities.filter(city => city.toLowerCase() == searchTerm);
  if (matches.length) {
    areaCovered.style.display = 'block';
  } else {
    areaNotCovered.style.display = 'block';
  }
});

.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;
}

<div class="HeadlineSearchContainer">
  <div class="SearchCharacterStyle">
    <h>SEARCH FOR AREA COVERANGE</h>
  </div>
  <div id="mySearch" class="searchbox_box">
    <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>
      <button type="submit">Search</button>
      <div class="searchrespond" id="searchRespond">
        <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>