Try Select2
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<select class="my-select" style="width: 50%">
<option></option>
<option value="123" data-hello="world">Hi1</option>
<option value="1234">Hi1234</option>
<option value="5234">hello</option>
<option value="356">ok</option>
</select>
<div>
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div>
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div>
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div>
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div>
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div>
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div>
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<div>
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option...
CoffeeScript
itemTemplate = (item) ->
# console.log item
return item.text unless item.id
$("<span>#{item.text}</span>").append(
$("<a class='info' style='float:right;' href='http://www.baidu.com/s?wd=#{item.text}' target='_blank'>open in baidu</a>")
.mouseup (e) ->
e.stopPropagation()
)
$select = $('.my-select').select2
placeholder: 'Choose one item'
templateResult: itemTemplate
templateSelection: itemTemplate
$select.on 'select2:open', ->
$sel = $('.my-select')
$input = $('.select2-search--dropdown .select2-search__field')
$input.prop('placeholder', 'type something')
$input.val($('.my-select option:selected').text())
$input.trigger('input')