Создание поля выбора, в котором пользователи могут вводить значения или выбирать из списка

Question

Есть ли способ имитировать поле ввода / выбора C, где у вас есть выпадающее меню с пустым текстовым полем вверху?Пользователи могут либо ввести новое значение, либо выбрать из списка.Кто-нибудь придумал, как сделать это с помощью PHP / Javascript?Решение типа AJAX было бы даже лучше.

Я не уверен, как назвать этот тип ящика, я не думаю, что это «комбинированный ящик», как думает большинство людей.

Answer 1

У вас есть несколько вариантов.

Вот быстрая функция, которую я собрал в jQuery, которая будет делать то, что вы хотите. Эта опция требовала, чтобы у клиента был включен JavaScript.

http://jsfiddle.net/QrA4N/25/

Если вы не хотите делать JavaScript обязательным требованием

Если вам нужно решение без JavaScript (код на стороне клиента).Вы застряли, поместив поле ввода с тем же «именем», что и поле выбора рядом с ним или после него, и добавив опцию «Другие» в поле выбора.

<select name="selAnimals" id="selAnimals">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="bird">Bird</option>
    <option value="guineapig">Guinea Pig</option>
    <option value="">Other</option>
</select>
<input type="text" name="selAnimals_Other" id="selAnimals_Other" />

Теперь ваш PHP будет иметьчтобы проверить правильность значения как $ _POST ["selAnimals"], так и $ _POST ["selAnimals_Other"].

Наилучший вариант - объединить приведенный выше HTML и JavaScript выше, чтобы создатьИзящно унижающее достоинство решение для тех, у кого включен или отключен JavaScript.

http://jsfiddle.net/QrA4N/26/

Я добавил дополнительные теги HTML INPUT в jsfiddle в верхней части ответа и изменил только 1 строкуфункции jQuery (makeInputSelect).

var $inp = $("#" + id + "_Other");

Answer 2

Для этого вы можете использовать знаменитую библиотеку Chosen :)

Кстати, см. Второй пример стран .