3

Имеется input и его datalist. Если я введу 1111, то развернётся список с подходящими значениями.
Но если я удалю любой символ(кроме последнего), то список для выбора сворачивается, как будто нет подходящих значений. То же самое происходит и при вводе текста в середину
Хотя если развернуть вручную, то результат правильный.
Как сделать, чтобы он не сворачивался или принудительно его развернуть?

<input type="text" list="int"> 
<datalist id="int">
  <option>1</option>
  <option>11</option>
  <option>111</option>
  <option>1111</option>
  <option>11111</option>
  <option>111111</option>
</datalist>

Пример

6
  • Странно у меня в FF всё корректно работает
    – EzioMercer
    13 июл 2022 в 23:24
  • @EzioMercer, в хроме вижу такую проблему. 14 июл 2022 в 3:40
  • c единицами пример мне кажется не очень - всегда с чем-то совпадает 14 июл 2022 в 8:44
  • @Daniil Loban пример специально такой сделал, чтобы проблему было легче увидеть. 14 июл 2022 в 11:14
  • ну вот я как-то не понял как ее увидеть если к примеру набрал 111 список открылся убрал 1 осталось 11 и список открыт, в хроме и лисе проверяю 14 июл 2022 в 11:43

1 ответ 1

3

Думаю, что в данном случае проще будет взять какую-нибудь UI библиотеку (или написать свою реализацию компонента, но это сложнее), дело в том что данные в конкретном случае вообще не играют никакой роли.

Все дело в клавишах ArrowLeft и ArrowRight либо любом клике мышки, которые сразу же скрывают список. Этот функционал зашит нативно в input или datalist и поменять его не получиться (как минимум нужно смотреть исходники чтобы понять почему такое поведение)

Если перемещаться по текстовому полю в начало и конец с помощью клавиш Home и End то сокрытие списка не происходит и при удалении находясь изначально не в конце тоже.

демонстрация ввода

Это в Firefox что касается Chrome то список открывается только при условии что курсор находится в конце строки, разумеется спорная реализация, но с ней тоже ничего не поделать. Дважды нажав на клавиатуре стрелку вниз можно открыть список, при первом нажатии переходим в конец, при втором открывается список, но сэмулировать это программно (через dispatchEvent) у меня не вышло.

Компромиссное решение

Ниже я вставил пример кода для авто дополнения с переводом комментариев ( оригинал этого кода на w3schools) так же указал места где возможна оптимизация кода.

function autocomplete(inp, arr) {
  // функкия принимает два аргумента поле ввода (input) и массив значений
  var currentFocus;
  // добавляем слушатель на событие ввода
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /* прячем список если был открыт раннее */
      closeAllLists();
      
      if (!val) { return false;}
      currentFocus = -1;
      
      /* создаем список значений: 
         это можно оптимизировать - не создвать каждый раз  */
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /* добавляем его в контейнер :*/
      this.parentNode.appendChild(a);
      /* для каждого элемента в массиве ...*/
      for (i = 0; i < arr.length; i++) {
        /* проверяем совпадает ли начало с введенным: */
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /* создаем список совпадений: */
          b = document.createElement("DIV");
          /*отмечаем совпавшие символы жирным:*/
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /* вставляем невидимый инпут для сохранения значений */
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /* вызываем при клике на элемент списка :*/
          b.addEventListener("click", function(e) {
              /* заполняем значением ввод:*/
              inp.value = this.getElementsByTagName("input")[0].value;
              /* скрываем список */
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  
  /* вызываем при нажатии клавиш стрелок или ввода (Enter) :*/
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /*стрелка вниз выбирает следующий элемент в списке:*/
        currentFocus++;
        /* выделяем его стилем :*/
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /* стрелка вверх выбирает предыдущий элемент в списке:*/
        currentFocus--;
        /* выделяем его стилем :*/
        addActive(x);
      } else if (e.keyCode == 13) {
        /* Если нажали Enter эмулируем клик по элементу для его выбора */
        e.preventDefault();
        if (currentFocus > -1) {
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /* функция подсвечивает активный элемент :*/
    if (!x) return false;
    /* убираем предыдущую подстветку: */
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /* добавляем текущую подсветку: */
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /* проходим по всем элементам списка убираем подстветку 
      это можно оптимизировать - цикл не нужен:*/
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  
  function closeAllLists(elmnt) {
    /* удаляем все элементы,
      это можно оптимизировать - не нужно каждый раз удалять  */
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }

  /* прячем список */
  document.addEventListener("click", function (e) {
    closeAllLists(e.target);
  });
}

var values = ["1", "11", "111", "1111", "11111", "111111"];
autocomplete(document.getElementById("myInput"), values);
* {
  box-sizing: border-box;
}

body {
  font: 16px Arial;  
}

/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}

input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}

input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}
<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Числа">
  </div>
  <input type="submit">
</form>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.