поле ввода текста html / js с опцией выпадающего меню - PullRequest
0 голосов
/ 14 декабря 2018

Я хотел бы иметь поле для ввода текста, которое также имеет дополнительный раскрывающийся список.Идеальный пользовательский интерфейс будет выглядеть как текстовый ввод по умолчанию и принимать текст, но при нажатии стрелки появится раскрывающийся список.Также было бы неплохо, чтобы раскрывающийся список был реализован с помощью select2, чтобы позволить легкий поиск значений (и это то, что я уже пробовал).

Моя первая попытка использовала функцию тегирования в select2, но это не такименно то, что я хочу, поскольку пользователь будет печатать, а затем должен выбрать свой новый ввод.По умолчанию это также не ввод текста в этом случае.Спасибо за любую помощь.Кроме того, параметры не могут быть жестко запрограммированы, так как мы опрашиваем дБ для элементов, которые будут показаны в списке.

обновления: Примером может быть что-то похожее на это: jqueryui.com/datepicker/#icon-trigger ... где по умолчанию используется текстовое поле ввода, и у нас есть кнопка для выбора даты, но в этом случае это кнопка, которая перекрывает раскрывающийся список в текстовом поле.

Я также посмотрел на datalist, и это сработало бы, но я не думаю, что вы не можете жестко закодировать параметры.

Примерно так: http://jqueryui.com/autocomplete/#combobox .. будетидеально.Но изменения будут состоять в том, что он должен принять любую введенную опцию, а не отклонить ее, а также извлечь из списка.Я не слишком знаком с интерфейсом, поэтому, если это возможно, дайте мне знать, как и какова основная идея?Я не думаю, что список может быть заполнен чем-то вроде запроса http get?

1 Ответ

0 голосов
/ 14 декабря 2018

попробуйте использовать HTML-тег datalist:

<form action="/action_page.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>
...