使用 JavaScript 创建搜索

Question

我正在尝试使用 JavaScript 创建搜索。我已经创建了框架，但不确定如何在用户单击下拉项目时使用所选选项填充输入字段。我该怎么办？这是我的代码：

HTML：

<input class="form-control searchResult" type="text" id="search" placeholder="Search">

<div id="match-list"></div>

JS：

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');

const searchStates = async searchText => {
    const res = await fetch('countries.json');
    const states = await res.json();

    let matches = states.filter(state => {
        const regex = new RegExp(`^${searchText}`, 'gi');
        return state.name.match(regex);
    })

    if (searchText.length === 0) {
        matches = [];
        matchList.innerHTML = '';
    }

    if (matches.length > 0) {
        const html = matches.map((match, i) => `<div class="dropdown" id="dropdown${i}"><option class="dropdown-text" id="dropdown-text${i}">${match.name}</option></div>`).join('');

        console.log(html);
        matchList.innerHTML = HTML;
    }

}

search.addEventListener('input', () => searchStates(search.value));

JSON：

[
  {
  "name":"Afghanistan",
  "phoneCode":"+93",
  "capital":"Kabul",
  "abbr":"AFG"
  },
  {
  "name":"Albania",
  "phoneCode":"+355",
  "capital":"Tirana",
  "abbr":"ALB"
  },
  {
  "name":"Algeria",
  "phoneCode":"+213",
  "capital":"Algiers",
  "abbr":"DZA"
  }
]

Answer 1

使用datalist 标签可能会更好。这将直接过滤结果并对点击事件做出反应：

html:

<input id="country-input list="countries">
<datalist id="countries"></datalist>
<button onClick="send">Send</button>

js:

// Store countries array in COUNTRIES
const inputDataList = document.getElementById("countries");

COUNTRIES.forEach((country) => {
  const countryOption = document.createElement("option");
  countryOption.value = country.name;
  inputDataList.appendChild(countryOption);
});

要读取输入值，只需从 input 元素中获取.value：

const countryInput = document.getElementById("country-input");

const sendCountry = () => {
    // Do stuff with countryInput.value
    console.log(countryInput.value);
};