The answer is
This link can help you: http://www.scriptol.com/html5/combobox.php
You have two examples. One in html4 and other in html5
HTML5
<input type="text" list="browsers"/>
<datalist id="browsers">
<option>Google</option>
<option>IE9</option>
</datalist>
HTML4
<input type="text" id="theinput" name="theinput" />
<select name="thelist" onChange="combo(this, 'theinput')">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
function combo(thelist, theinput) {
theinput = document.getElementById(theinput);
var idx = thelist.selectedIndex;
var content = thelist.options[idx].innerHTML;
theinput.value = content;
}
This one is much smaller, doesn't require jquery and works better in safari. https://github.com/Fyrd/purejs-datalist-polyfill/
Check the issues for the modification to add a downarrow. https://github.com/Fyrd/purejs-datalist-polyfill/issues
None of the other answers were satisfying, largely because the UI still looks bad. I found this, which looks good and is very close to being perfect as well as customizable.
A full list of examples and options and such can be found here, but here's a basic demo:
$('#editable-select').editableSelect();<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-editable-select.min.css" rel="stylesheet"/>_x000D_
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-editable-select.min.js"></script>_x000D_
_x000D_
<select id="editable-select">_x000D_
<option>Alfa Romeo</option>_x000D_
<option>Audi</option>_x000D_
<option>BMW</option>_x000D_
<option>Citroen</option>_x000D_
</select>Look at ComboBox or Combo on this site: http://www.jeasyui.com/documentation/index.php#
Given that the HTML datalist tag is still not fully supported, an alternate approach that I used is the Dojo Toolkit ComboBox. It was easier to implement and better documented than other options I've explored. It also plays nicely with existing frameworks. In my case, I added this combobox to an existing website that's based on Codeigniter and Bootstrap with no problems You just need to be sure to apply the Dojo theme (e.g. class="claro") to the combo's parent element instead of the body tag to avoid styling conflicts.
First, include the CSS for one of the Dojo themes (such as 'Claro'). It's important that the CSS file is included prior to the JS files below.
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dijit/themes/claro/claro.css" />
Next, include jQuery and Dojo Toolkit via CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
Next, you can just follow Dojo's sample code or use the sample below to get a working combobox.
<body>
<!-- Dojo Dijit ComboBox with 'Claro' theme -->
<div class="claro"><input id="item_name_1" class=""/></div>
<script type="text/javascript">
$(document).ready(function () {
//In this example, dataStore is simply an array of JSON-encoded id/name pairs
dataStore = [{"id":"43","name":"Domain Name Renewal"},{"id":"42","name":"Hosting Renewal"}];
require(
[ "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"],
function (Memory, ComboBox) {
var stateStore = new Memory({
data: dataStore
});
var combo = new ComboBox({
id: "item_name_1",
name: "desc_1",
store: stateStore,
searchAttr: "name"},
"item_name_1"
).startup();
});
});
</script>
</body>
My solution is very simple, looks exactly like a native editable combobox and yet works even in IE6 (some answers here require a lot of code or external libraries and the result is so so, e.g. the text in the textbox goes behind the dropdown icon of the combobox' part or it doesn't look like an editable combobox at all).
The point is to clip the combobox only the dropdown icon to be visible above the textbox. And the textbox is wide a bit underneath the combobox' part, so you don't see its right end - visually continues with the combobox: https://jsfiddle.net/dLsx0c5y/2/
select#programmoduleselect
{
clip: rect(auto auto auto 331px);
width: 351px;
height: 23px;
z-index: 101;
position: absolute;
}
input#programmodule
{
width: 328px;
height: 17px;
}
<table><tr>
<th>Programm / Modul:</th>
<td>
<select id="programmoduleselect"
onchange="var textbox = document.getElementById('programmodule'); textbox.value = (this.selectedIndex == -1 ? '' : this.options[this.selectedIndex].value); textbox.select(); fireEvent2(textbox, 'change');"
onclick="this.selectedIndex = -1;">
<option value=RFEM>RFEM</option>
<option value=RSTAB>RSTAB</option>
<option value=STAHL>STAHL</option>
<option value=BETON>BETON</option>
<option value=BGDK>BGDK</option>
</select>
<input name="programmodule" id="programmodule" value="" autocomplete="off"
onkeypress="if (event.keyCode == 13) return false;" />
</td>
</tr></table>
(Used originally e.g. here, but don't send the form: old.dlubal.com/WishedFeatures.aspx )
EDIT: The styles need to be a bit different for macOS: Ch is ok, for FF increase the combobox' height, Safari and Opera ignore the combobox' height so increase their font size (has an upper limit, so then decrease the textbox' height a bit): https://i.stack.imgur.com/efQ9i.png
Well it's 2016 and there is still no easy way to do a combo ... sure we have datalist but without safari/ios support it's not really usable. At least we have ES6 .. below is an attempt at a combo class that wraps a div or span, turning it into a combo by putting an input box on top of select and binding the relevant events.
see the code at: https://github.com/kofifus/Combo
(the code relies on the class pattern from https://github.com/kofifus/New)
Creating a combo is easy ! just pass a div to it's constructor:
let mycombo=Combo.New(document.getElementById('myCombo'));_x000D_
mycombo.options(['first', 'second', 'third']);_x000D_
_x000D_
mycombo.onchange=function(e, combo) {_x000D_
let val=combo.value;_x000D_
// let val=this.value; // same as above_x000D_
alert(val);_x000D_
}<script src="https://rawgit.com/kofifus/New/master/new.min.js"></script>_x000D_
<script src="https://rawgit.com/kofifus/Combo/master/combo.min.js"></script>_x000D_
_x000D_
<div id="myCombo" style="width:100px;height:20px;"></div>in HTML, you do this backwards: You define a text input:
<input type="text" list="browsers" />
and attach a datalist to it. (note the list attribute of the input).
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<html>
<head>
<title></title>
<script src="jquery-3.1.0.js"></script>
<script>
$(function () {
$('#selectnumber').change(function(){
alert('.val() = ' + $('#selectnumber').val() + ' AND html() = ' + $('#selectnumber option:selected').html() + ' AND .text() = ' + $('#selectnumber option:selected').text());
})
});
</script>
</head>
<body>
<div>
<select id="selectnumber">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
</body>
</html>
Thanks...:)
The dojo example here do not work when applied to existing code in most cases. Therefor I had to find an alternate, found here - hxxp://technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (now points to a spam site or worse)
archive.org (not very useful)
Here is the jsfiddle - https://jsfiddle.net/ze7fgby7/
Source: Stackoverflow.com