Как создать «гибридный» раскрывающийся список HTML, который также может работать как текстовое поле? - PullRequest
1 голос
/ 14 октября 2010

Для моего веб-сайта мне нужно, чтобы пользователи могли вводить свои города.

Я бы хотел использовать для этого 2 раскрывающихся списка: раскрывающиеся списки "Штат" и "Город". Выбор в списке «Город» будет зависеть от того, какое «государство» было выбрано.

Однако могут быть случаи, когда «Город» пользователя отсутствует в раскрывающемся списке. Чтобы справиться с этими случаями, я хочу, чтобы ввод «Город» был «гибридным»: хотя пользователи могли выбирать вариант из раскрывающегося списка, они также могли использовать ввод в качестве текстового поля и просто вводить название своего города.

Примером того, что я имею в виду, является карта Google. Введите любой адрес в Google Map. Затем нажмите «Направления» на левой панели. Затем нажмите значок «На общественном транспорте» (2-й значок слева). Самый правый выпадающий список - это то, о чем я говорю. Вы можете выбрать такие варианты, как «1:00 вечера», «1:30 вечера», «2:00 вечера» и т. Д. Из выпадающего списка. Но вы также можете просто напечатать время вроде «1:23 вечера» внутри коробки.

Как мне сделать что-то подобное? Есть ли библиотека / фреймворк JavaScript, который делает это? В настоящее время я использую jQuery.

Ответы [ 3 ]

1 голос
/ 14 октября 2010

Существует множество примеров JavaScript, использующих JQuery или собственный JS. Их обычно называют поля со списком - за их способность выбирать из выпадающего списка или принимать типизированную запись - большинство из них включают в себя настройки, позволяющие включить произвольную запись против принудительного выбора только из списка. У меня нет опыта работы с конкретным типом, поэтому я не буду давать рекомендации, но если вы используете Google "комбинированное окно javascript", это поможет вам начать работу в правильном направлении:)

1 голос
/ 28 апреля 2017

Некоторые решения, которые я нашел, для которых это может касаться:

Так что, вероятно, вы можете рассмотреть "выберите поддержку тегов "хорошая комбинация слов для поиска в Google.

1 голос
/ 14 октября 2010

Если вы просматриваете источник на странице указаний GMaps, на которую ссылаетесь, вы можете увидеть, как они это делают; кнопка «выпадающий» на самом деле просто изображение. Когда выбор сделан из выпадающего списка, значение помещается в текстовое поле.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...