web-dev-qa-db-ja.com

検索ボックスを含む単一のドロップダウン

単一の選択ドロップダウンオプションに検索ボックスを追加したい。

コード：

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

上記のように入力タグを追加してもうまくいきません。

Html5-datalistを使用してみましたが、動作します。 html5-datalistはchromeのスクロール可能なオプションをサポートしていないため、他のオプションが必要です。

誰でも他の検索ボックスオプションを提案できますか？ Django-pythonフレームワークと互換性がある必要があります。

javascriptjqueryhtmldropdownboxsearch-box
8
s_user

Select2プラグインを使用してこの機能を実装するだけです

プラグインリンク： Select2

enter image description here

14
Deepak

また、プレーンHTMLソリューションもあります。 datalist element を使用して、提案を表示できます。

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

注：入力のリスト属性の値がデータリストのIDと同じであることを確認してください。

使用できます でわかるように、すべてのブラウザがデータリスト要素を（完全に）サポートしているわけではありません。

7
Fahad Israr

semantic uiを使用してこの機能を実装できます

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

1
Morris S

HTMLとCSSを使用してカスタムドロップダウンを作成しました。ドロップダウンの上部に固定された検索タグを使用して、ブートストラップで次のHTMLとCSSを使用できます。

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

上記のコードのCSSは次のとおりです。

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

ドロップダウンのスクリーンショット

0
Deepak Jassi