Как я могу сделать автозаполнение или предложения с JavaScript, пока пользователь что-то ищет? - PullRequest
Новая
       42

Как я могу сделать автозаполнение или предложения с JavaScript, пока пользователь что-то ищет?

0 голосов
/ 03 сентября 2018

Я сделал это в HTML и Java-скрипте. Нужно сделать так, чтобы выпадающее меню подсказок появлялось, когда пользователь пишет первую букву слова, которое он ищет

Как я могу это сделать? 

   <html>
   <body>
   <input type="text" id="myInput" autofocus="true">
   <button id="btn" onclick="myfunction()">Search</button>
   <div id="outputArea" style="font-size: 30px"></div>
    <script>
     var acronyms = {
      omg: "Oh My God",
      lol: "Lough Out Loud",
      lmao: "Lough My Age Off",
      wtf: "What This Function"
      };
       var outputAreaRef = document.getElementById("outputArea");
         function myfunction(){
         var word = document.getElementById("myInput").value.toLowerCase().trim();
       if (acronyms[word] !== undefined) {word = acronyms[word];}
      outputAreaRef.innerHTML = word;}
      </script>
     </body>
      </html>

1 Ответ

0 голосов
/ 04 сентября 2018

Существует элемент HTML5, который делает это действительно простым. Тег datalist . Вы можете жестко закодировать элементы в списке или использовать JS для заполнения списка.

Вы можете увидеть этот ответ для других вариантов в списке данных. Значения HTML-данных из массива в javascript

Если вы используете JS для заполнения, вот как выглядит разметка: <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <!-- more items here --> </datalist> 

(function(browsers) {

  function addItems (list, container) {
      list.forEach(function(item){
      const option = document.createElement('option');

      option.setAttribute('value', item);
      container.appendChild(option);
    });
  }

  const browserList = ['Internet Explorer','Firefox','Chrome','Opera','Safari','Brave'];
  addItems(browserList, browsers);
}(document.getElementById('browsers')));
<label for="autocomplete">Search for Browsers</label>
<input id="autocomplete" list="browsers">

<datalist id="browsers"></datalist>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...