как добавить текстовое поле в раскрывающемся списке выберите опцию

Question

я пытаюсь добавить текстовое поле в раскрывающемся списке, но текстовое поле не отображается в раскрывающемся списке ниже картина желаемого выхода

$.each(SegGoalData, function(i, v) { 
 
    $("#Select").append("<option value=" + SegGoalData[i][0] + ">" + SegGoalData[i][1] + "</option>"); // i am adding value to dropdown 
 
    $("#Select").append("<option><input type='text' name='fname'></option>"); // i am trying to append to textbox 
 
})

<select id="Select"> 
 

 
    <option selected="selected" disabled="disabled">Look here for more goals</option> 
 

 
</select>

Answer 1

Вы можете использовать select2 JS

Select2 является полнофункциональным, богатым выбором замены/повышение плагина. Он не только перенастраивает выбранные элементы, но и расширяет их с помощью дополнительных функций.

$(document).ready(function() { 
 
    $(".custom-select2").select2(); 
 
});

.custom-select2{width:200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> 
 

 
<select class="custom-select2"> 
 
    <option value="AL">Alabama</option> 
 
    <option value="AR">Arkansas</option> 
 
    <option value="IL">Illinois</option> 
 
    <option value="IA">Iowa</option> 
 
    <option value="KS">Kansas</option> 
 
    <option value="KY">Kentucky</option> 
 
    <option value="LA">Louisiana</option> 
 
    <option value="MN">Minnesota</option> 
 
    <option value="MS">Mississippi</option> 
 
    <option value="MO">Missouri</option> 
 
    <option value="OK">Oklahoma</option> 
 
    <option value="SD">South Dakota</option> 
 
    <option value="TX">Texas</option> 
 
    <option value="TN">Tennessee</option> 
 
    <option value="WI">Wisconsin</option> 
 
</select>

Как и другие передовые отборных плагинов, это пакеты в целой куче настраиваемая особенность таких как:

• единого выбора элемента/элемента с optgroups
• Multi- select element
• Сортировка/фильтруемое поле поиска для элементов выбора
• Возможность загрузки данных из удаленного источника данных (например, от API для динамического изменения параметров)
• Пометка поддержки (выбор из предопределенного списка/добавления динамических тегов на лету)

Answer 2

Это невозможно, потому что пользовательский интерфейс браузера не поддерживает эту функциональность, поэтому вам придется делать пользовательский интерфейс или использовать библиотеку, которая уже сделана для вас. как указано выше. https://select2.github.io/ - ваш лучший вариант, могут быть другие библиотеки, которые могут это сделать.

Они заменят ваш тег <select>...</select> своим собственным HTML.

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

Answer 3

Вы можете» t на данный момент. Просто используйте выделенный для поиска выпадающий плагин (Choosen, Select2 и т.д ...), или сделать свой собственный :)

Однако, Mozilla уже работает над этой функцией: Bug 1309935 - Add ability to find within select dropdown when over 40 elements (вид specs)