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:</label><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

Вы можете использовать oninput прослушиватель событий и фильтровать список языков на основе введенного текста:

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",
  
}

const matches = document.getElementById('matches');
const locale = document.getElementById('locale');

locale.addEventListener('input', () => {
  let text = event.target.value;
  let re = new RegExp(text.replace('(', '\\('));
  let selLanguages = Object.values(LANGUAGE_BY_LOCALE).filter(lan => re.test(lan)).map(text => `<li>${text}</li>`).join('');
  
  matches.innerHTML = selLanguages;
});

matches.addEventListener('click', () => {
  locale.value = event.target.textContent;
  matches.innerHTML = '';
});

li {
  list-style-type: none;
  margin-left: 3em;
}
li:hover {
  background-color: #eee;
}

<form>
  <label>Locale: <input type="text" name="locale" id="locale" /></label>
  <div id="matches">
  </div>
</form>
 

Answer 2

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>