html5 combobox,combobox - HTML combo box with option to type an entry - Stack Overflow

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.

Next, include jQuery and Dojo Toolkit via CDN

Next, you can just follow Dojo's sample code or use the sample below to get a working combobox.

$(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();

});

});