javascript - combo - option select html

¿Cómo puedo crear un cuadro combinado editable en HTML/Javascript?

Question

Necesito que los usuarios seleccionen un elemento de una lista desplegable, pero también les permiten ingresar cualquier texto, incluso si no coincide con un elemento de la lista. ¿Cómo puedo lograr esto en una página web con HTML y Javascript?

El campo de select no permite que los usuarios ingresen texto, y el campo de texto de input no muestra las alternativas preferidas.

Todos los elementos deben mostrarse si el usuario abre el menú desplegable, por lo que no puede ser un simple autocompletado que solo muestra elementos coincidentes.

Answer 1

Aquí hay un script para eso: Demo , Source

U otro que funciona de forma ligeramente diferente: enlace eliminado (el sitio ya no existe)

Answer 2

Creo que esto cumplirá con sus requisitos:

https://github.com/RUPOJS/jsCombo

Answer 3

Estaba buscando una respuesta también, pero todo lo que pude encontrar estaba desactualizado.

Este problema se resuelve desde 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>

Si no hubiera encontrado eso, habría seguido este enfoque:

Demo

Answer 4

Olvide el elemento datalist que es una buena solución para la función de autocompletar, pero no para la función de cuadro combinado.

css:

.combobox {
    display: inline-block;
    position: relative;
}

.combobox select {
    display: none;
    position: absolute;
    overflow-y: auto;
}

html:

<div class="combobox">
    <input type="number" name="" value="" min="" max="" step=""/><br/>
    <select size="3">
        <option value="0"> 0</option>
        <option value="25"> 25</option>
        <option value="40"> 40</option>
    </select>
</div>

js (jQuery):

$(''.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);
});

Esto funciona correctamente incluso cuando se utiliza la entrada de texto en lugar del número.

Answer 5

Puede probar mi implementación de combobox editable http://www.zoonman.com/projects/combobox/

Answer 6

Sé que esta pregunta ya fue respondida, hace mucho tiempo, pero esto es para otras personas que pueden terminar aquí y tienen problemas para encontrar lo que necesitan. Tuve problemas para encontrar un complemento existente que hiciera exactamente lo que necesitaba, así que escribí mi propio complemento jQuery UI para realizar esta tarea. Se basa en el ejemplo de combobox en el sitio jQuery UI. Esperemos que pueda ayudar a alguien.

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

Answer 7

intenta hacer esto

<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>

por favor mira el siguiente ejemplo fiddle