Как я могу создать редактируемое поле со списком в HTML / Javascript?

Question

Мне нужно разрешить пользователям выбирать элемент из раскрывающегося списка, но также разрешить им вместо этого вводить любой текст, даже если он не соответствует элементу в списке.Как мне добиться этого на веб-странице с HTML и Javascript?

Поле select не позволяет пользователям вводить текст, а в текстовом поле input не отображаются предпочтительные альтернативы.

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

Answer 1

Вот скрипт для этого: Демо , Источник

Или другой, который работает немного по-другому: ссылка удалена (сайт больше не существует)

Answer 2

Я знаю, что на этот вопрос уже дан ответ, давным-давно, но это для других людей, которые могут оказаться здесь и испытывают трудности с поиском того, что им нужно. У меня были проблемы с поиском существующего плагина, который делал именно то, что мне было нужно, поэтому я написал свой собственный плагин jQuery UI для выполнения этой задачи. Он основан на примере комбинированного списка на сайте пользовательского интерфейса jQuery. Надеюсь, это кому-нибудь поможет.

https://github.com/tmooney3979/jquery.ui.combify

Answer 3

Вы можете попробовать мою реализацию редактируемого комбинированного списка http://www.zoonman.com/projects/combobox/

Answer 4

Искал также ответ, но все, что я мог найти, было устаревшим.

Эта проблема решена, так как HTML5: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

Если я не нашел этоЯ бы пошел с таким подходом:

http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html

Answer 5

Забудьте элемент списка данных, который является хорошим решением для функции автозаполнения, но не для функции комбинированного списка.):

$('.combobox').each(function() {
    var
        $input = $(this).find('input'),
        $select = $(this).find('select');
    function hideSelect() {
        setTimeout(function() {
            if (!$select.is(':focus') && !$input.is(':focus')) {
                $select
                    .hide()
                    .css('z-index', 1);
            }
        }, 20);
    }
    $input
        .focusin(function() {
            if (!$select.is(':visible')) {
                $select
                    .outerWidth($input.outerWidth())
                    .show()
                    .css('z-index', 100);
            }
        })
        .focusout(hideSelect)
        .on('input', function() {
            $select.val('');
        });
    $select
        .change(function() {
            $input.val($select.val());
        })
        .focusout(hideSelect);
});

Это работает правильно, даже если вы используете ввод текста вместо числа.

Answer 6

Я думаю, что это будет соответствовать вашим требованиям:

https://github.com/RUPOJS/jsCombo

Answer 7

попробуйте сделать это

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2"  style="width: 140px;
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
        <div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
    top: 0px; left: 0px; z-index: 1; width: 165px;">
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>

пожалуйста, посмотрите на следующий пример Fiddle