Menu
When there is a long set of elements in a datalist, they will all get displayed with a scroll bar next to them. Is there an easy way to only display the top 5, and just cut the others off?
For example: http://jsfiddle.net/yxafa/
<input type="text" name="search" id="search" placeholder="type 'r'" list="searchresults" autocomplete="off"> <datalist id="searchresults"> <option>Ray0</option> <option>Ray1</option> <option>Ray2</option> <option>Ray3</option> <option>Ray01</option> <option>Ray11</option> <option>Ray21</option> <option>Ray31</option> <option>Ray02</option> <option>Ray12</option> <option>Ray22</option> <option>Ray32</option> <option>Ray012</option> <option>Ray112</option> <option>Ray212</option> <option>Ray312</option> <option>Ray03</option> <option>Ray13</option> <option>Ray23</option> <option>Ray33</option> <option>Ray013</option> <option>Ray113</option> <option>Ray213</option> <option>Ray313</option> <option>Ray023</option> <option>Ray123</option> <option>Ray223</option> <option>Ray323</option> <option>Ray0123</option> <option>Ray1123</option> <option>Ray2123</option> <option>Ray3123</option> </datalist> 
953
The multiple attribute (specification ) is used to notate that multiple values should be able to be selected. The specification for the multiple attribute shows an example of usage with datalists.
The only cross-browser solution is to: a) make input wider to make sure whole value is readable: JSFiddle b) use (or write) some JavaScript to emulate datalist so you can have full control over it's appearance.
Select input element presents options for the users from which they need to select one of them. On the otherhand, Datalist presents a list of suggested values to the associated input form (text) field and users are free to select one of those suggested values or type in their own value.
With some modern javascript and html you could do something like this.
Here's the document:
<template id="resultstemplate"> <option>Ray0</option> <option>Ray1</option> <option>Ray2</option> <option>Ray3</option> <option>Ray01</option> <option>Ray11</option> <option>Ray21</option> <option>Ray31</option> <option>Ray02</option> <option>Ray12</option> <option>Ray22</option> <option>Ray32</option> <option>Ray012</option> <option>Ray112</option> <option>Ray212</option> <option>Ray312</option> <option>Ray03</option> <option>Ray13</option> <option>Ray23</option> <option>Ray33</option> <option>Ray013</option> <option>Ray113</option> <option>Ray213</option> <option>Ray313</option> <option>Ray023</option> <option>Ray123</option> <option>Ray223</option> <option>Ray323</option> <option>Ray0123</option> <option>Ray1123</option> <option>Ray2123</option> <option>Ray3123</option> </template> <input type="text" name="search" id="search" placeholder="type 'r'" list="searchresults" autocomplete="off" /> <datalist id="searchresults"></datalist> And here's the js:
var search = document.querySelector('#search'); var results = document.querySelector('#searchresults'); var templateContent = document.querySelector('#resultstemplate').content; search.addEventListener('keyup', function handler(event) { while (results.children.length) results.removeChild(results.firstChild); var inputVal = new RegExp(search.value.trim(), 'i'); var clonedOptions = templateContent.cloneNode(true); var set = Array.prototype.reduce.call(clonedOptions.children, function searchFilter(frag, el) { if (inputVal.test(el.textContent) && frag.children.length < 5) frag.appendChild(el); return frag; }, document.createDocumentFragment()); results.appendChild(set); }); And here's a live example: http://jsfiddle.net/gildean/yxafa/6/
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
