Menú desplegable único con cuadro de búsqueda en él

Quiero agregar un cuadro de búsqueda a una sola opción desplegable de selección.

Código:

<select id="widget_for" name="{{widget_for}}">
<option value="">select</option>

{% for key, value in dr.items %}

<input placeholder="This ">

<option value="{% firstof value.id key %}" {% if key in selected_value %}selected{% endif %}>{% firstof value.name value %}</option>


{% endfor %}
</select>

Agregar etiquetas de entrada como se indica arriba no funciona.

He intentado usar html5-datalist y funciona. Quiero algunas otras opciones ya que html5-datalist no admite la opción desplazable en Chrome.

¿Alguien puede sugerir otras opciones de cuadro de búsqueda? Deben ser compatibles con el marco django-python.

También hay una solución HTML simple. Puede usar un elemento de lista de datos para mostrar sugerencias:

<div>
    <datalist id="suggestions">
        <option>First option</option>
        <option>Second Option</option>
    </datalist>
    <input  autoComplete="on" list="suggestions"/> 
</div>

Nota: asegúrese de que el valor del atributo de la lista en la entrada sea el mismo que el id de la lista de datos.

Tenga en cuenta que no todos los navegadores tienen soporte (total) para el elemento de lista de datos, como puede ver en Puedo usar.

Simplemente use el complemento select2 para implementar esta característica

Enlace del complemento: Seleccionar2

Si no le gusta la biblioteca externa, puede usar el elemento HTML5 datalist.

Ejemplo de W3Escuela:

 <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>

Creé un menú desplegable personalizado usando HTML y CSS con una etiqueta de búsqueda en la parte superior que se fija en la parte superior del menú desplegable. Puede usar el siguiente HTML y CSS con arranque: –

<div class="dropdown dropdown-scroll">
<button class="btn btn-default event-button dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    <span>Search</span>
    <span class="caret"></span>
</button>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <div class="input-group input-group-sm search-control">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
        </span>
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <ul class="dropdown-list">
        <li role="presentation" ng-repeat="item in items | filter:eventSearch">
            <a>{{item}}</a>
        </li>
    </ul>
</div>

Y CSS para el código anterior es: –

.dropdown.dropdown-scroll .dropdown-list{
    max-height: 233px;
    overflow-y: auto;
    list-style-type: none;
    padding-left: 10px;
    margin-bottom: 0px;
}
.dropdown-list  li{
    font-size: 14px;
    height: 20px;
}

.dropdown-list  li > a{
    color: black;
}
.dropdown-list a:hover{
   color: black;
}

.dropdown-list li:hover{
    background-color: lightgray;
}

Captura de pantalla del menú desplegable

puedes usar interfaz de usuario semántica para implementar esta característica

https://semantic-ui.com/introduction/new.html

Utilizar Seleccionar2. Para el proceso de instalación Haga clic aquí