Einzelnes Dropdown mit Suchfeld darin

Ich möchte ein Suchfeld zu einer einzelnen Auswahl-Dropdown-Option hinzufügen.

Code:

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

Das Hinzufügen eines Input-Tags wie oben funktioniert nicht.

Ich habe versucht, html5-datalist zu verwenden, und es funktioniert. Ich möchte einige andere Optionen, da html5-datalist keine scrollbaren Optionen in Chrome unterstützt.

Kann jemand andere Suchfeldoptionen vorschlagen? Sie sollten mit dem Django-Python-Framework kompatibel sein.

Es gibt auch eine einfache HTML-Lösung, die Sie verwenden können datalist-Element um Vorschläge anzuzeigen:

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

Hinweis: Stellen Sie sicher, dass der Wert des Listenattributs in der Eingabe mit der ID der Datenliste übereinstimmt.

Bitte beachten Sie, dass nicht alle Browser das Datalist-Element (vollständig) unterstützen, wie Sie weiter unten sehen können Kann ich benutzen.

Verwenden Sie einfach das select2-Plugin, um diese Funktion zu implementieren

Plugin-Link: Wählen Sie 2

Wenn Sie keine externe Bibliothek mögen, können Sie das HTML5-Element verwenden datalist.

Beispiel aus W3School:

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

Ich habe ein benutzerdefiniertes Dropdown-Menü mit HTML und CSS mit Such-Tag oben erstellt, das oben im Dropdown-Menü fixiert ist. Sie können das folgende HTML und CSS mit Bootstrap verwenden: –

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

Und CSS für den obigen Code ist:-

.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;
}

Screenshot des Dropdowns

Sie können verwenden semantische ui um diese Funktion zu implementieren

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

Verwenden Wählen Sie 2. Für den Installationsprozess Klicken Sie hier