作为用户类型的Javascript自动完成下拉列表

Question

我正在建立一个带有文本字段的HTML页面，供用户键入任何给定的语言。我有世界语言的javascript文件，我需要文本字段才能自动完成。我已将javascript文件链接到HTML页面，但是无法获取要从javascript文件中提取的自动完成功能。

如何通过从javascript文件中提取数据来自动完成下拉菜单？

var LANGUAGE_BY_LOCALE = {
  af_NA: "Afrikaans (Namibia)",
  af_ZA: "Afrikaans (South Africa)",
  af: "Afrikaans",
  ak_GH: "Akan (Ghana)",
  ak: "Akan",
  sq_AL: "Albanian (Albania)",
  sq: "Albanian",
  am_ET: "Amharic (Ethiopia)",
  am: "Amharic",
  
  ... and so on

<p>Locale: <input type='text' value='uzb' /></p>
      <div><ul>
        <li>Uzbek (Arabic)</li>
        <li>Uzbek (Arabic, Afghanistan)</li>
        <li>Uzbek (Cyrillic)</li>
        <li>Uzbek (Cyrillic, Uzbekistan)</li>
        <li>Uzbek (Latin)</li>
        <li>Uzbek (Latin, Uzbekistan)</li>
        <li>Uzbek</li>
      </ul></div>
    <hr />
    <form>
      <label for="locale">Locale: <input type="text" name="locale" id="locale" />
      <div id="matches">
      </div>
    </form>
      <script>src="locales.js" type="text/javascript"></script>
      <script src="jquery-6.14.2.min.js"></script>

Answer 1

const LANGUAGE_BY_LOCALE = {
  af_NA: "Afrikaans (Namibia)",
  af_ZA: "Afrikaans (South Africa)",
  af: "Afrikaans",
  ak_GH: "Akan (Ghana)",
  ak: "Akan",
  sq_AL: "Albanian (Albania)",
  sq: "Albanian",
  am_ET: "Amharic (Ethiopia)",
  am: "Amharic",
};

const setup = () => {
  fillDataList();

};
const fillDataList = () => {
  const localeOptions = document.querySelector('#locale-options');
  Object.keys(LANGUAGE_BY_LOCALE).forEach((key) => {
    let option = document.createElement('option');
    option.setAttribute('data-value', key);
    option.value = LANGUAGE_BY_LOCALE[key];
    localeOptions.appendChild(option);
  });
};


//load
window.addEventListener('load', setup);

<label for="locale-choice">Locale:</label>
<input list="locale-options" id="locale-choice" name="locale-choice">

<datalist id="locale-options"></datalist>