FAQ Database Discussion Community


HTML5 Datalist with Readonly Input, is it valid?

html5,html-datalist
I have in my application a html5 datalist like so: <input type="text" list="mydatalist" /> <datalist id="mydatalist"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </datalist> It works very well until I change the input element to readonly like so: <input type="text" list="mydatalist" readonly /> Then focusing on the input element now does...

Custom Autocomplete with html5 datalist

javascript,jquery,html5,html-datalist
I am working with html datalist to auto populate some data. I want a behavior where it should filter everything except one default value. Below is the example code: <input type="text" list="mylist"/> <datalist id="mylist"> <option value="San Jose"></option> <option value="San Francisco"></option> <option value="New York"></option> <option value="Chicago"></option> <option value="Boston"></option> <option value="Los Angeles"></option>...

datalist get selected value and custom attribute (without events)

javascript,jquery,css,html5,html-datalist
I have a datalist with options and a custom attribute. <input list="selectedItems" class="selectedItemsList"></input> <datalist id="selectedItems"> <option value="test11" oldvalue="f1"></option> <option value="test12" oldvalue="f2"></option> </datalist> It is displayed on a popup. When a popup closes the value and custom attribute value must be used in a function... I tried: alert($("#selectedItems option:selected").val()); alert($("#selectedItems option:selected").attr("oldvalue"));...

Show datalist labels but submit the actual value

javascript,html,html5,cross-browser,html-datalist
Currently the HTML5 <datalist> element is supported in most major browsers (except Safari) and seems like an interesting way to add suggestions to an input. However, there seem to be some discrepancies between the implementation of the value attribute and the inner text on the <option>. For example: <input list="answers"...

Populating a select box based off of previous selection

javascript,html,html-datalist
Basically this is what i want to happen. 1. Choose name from datalist 2. randomly populates "standard" or "Sensitive" 3. Based on whats populated in step 2 the "VIP" select box will display Yes or No (if step 2 = standard then VIP = No, if step 2 = Sensitive...

HTML5 datalist does not recognize numbers in autocomplete function

html,html5,html-datalist
I am trying to implement an input field with datalist that contains numbers only. I have noticed that the datalist's autocomplete functions does not work for datalist values that are equal to numbers. How can I make the autocomplete function work for numeric values? EXAMPLE <h2>Text datalist</h2> <p>Try typing "Greece"</p>...

Cannot find a submodule imported inside a module installed from npm

node.js,npm,reactjs,browserify,html-datalist
I would like to use a node.js module from https://github.com/asbjornenge/react-datalist using browserify. I did install the module locally at my working directory. In that directory, I created a javascript file, main.jsx var React = require('react'); var ReactDatalist = require('react-datalist'); var options = ['apple','orange','pear','pineapple','melon']; React.render(<ReactDatalist list="fruit" options={options} />, document.body); Then, I...

How to populate a large datalist (~2000 items) from a dictionary

javascript,ajax,dictionary,html-datalist
Right now I'm using the following code but it takes ~10 seconds on Chrome and ~2 minutes on IE11, which is where its mostly going to end up being used. for (var key in dict) { if (dict.hasOwnProperty(key)) { combo.innerHTML += "<option value=\"" + dict[key] + "\">" + key +...