25

I want to add search box to a single select drop down option.

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>

Adding a input tags as above does not work out.

I have tried using html5-datalist and it works. I want some other options as html5-datalist does not support scrollable option in chrome.

Can anyone suggest any other searchbox options? They should be compatible with django-python framework.

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
s_user
  • 586
  • 2
  • 8
  • 19

6 Answers6

53

There's also a plain HTML solution You can use a datalist element to display suggestions:

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

Note:Ensure that value of list attribute in input is same as the id of datalist.

Please be advised not all broswers have (full) support for the Datalist Element, as you can see on Can I use.

Johna
  • 128
  • 8
Fahad Israr
  • 1,041
  • 10
  • 9
37

Simply use select2 plugin to implement this feature

Plugin link: Select2

enter image description here

Deepak
  • 1,510
  • 1
  • 14
  • 27
15

If you don't like external library, you can use the HTML5 element datalist.

Example from 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>
lehoang
  • 3,577
  • 1
  • 15
  • 16
  • this is pretty useful comment. thanks – codenamebazinga Jun 28 '22 at 17:45
  • This is useful but i've an issue of showing catched values in dropdown. I tried to use `autocomplete="off"` even then the value that doesnt exists are showing. I fetch dropdown arrays by an api. – Rajanboy Dec 29 '22 at 06:18
3

I have made a custom dropdown using HTML and CSS with search tag on the top which is fixed at the top of dropdown.You can use the following HTML and CSS with bootstrap:-

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

And CSS for the above code is:-

.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 of the dropdown

Deepak Jassi
  • 31
  • 2
0

you can use semantic ui to implement this feature

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

Morris S
  • 2,337
  • 25
  • 30
-1

Use Select2. For Installation Process Click Here

Md. Hasan Uzzaman
  • 47
  • 1
  • 1
  • 6