javascript 限制 datalist 显示的总条目数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15097563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Limit total entries displayed by datalist
提问by Gus
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?
当数据列表中有一组很长的元素时，它们都会在旁边显示一个滚动条。有没有一种简单的方法来只显示前 5 名，然后将其他人剪掉？
For example: http://jsfiddle.net/yxafa/
例如：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>
采纳答案by Olli K
With some modern javascript and html you could do something like this.
使用一些现代的 javascript 和 html，你可以做这样的事情。
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:
这是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/
这是一个活生生的例子：http: //jsfiddle.net/gildean/yxafa/6/
回答by Aeron R
No javascript example:
没有 javascript 示例：
<input list="site" name="f" minlength="2" style="height:5.1em">
<datalist id="site" style="height:5.1em">
Took me a minute of experimenting :)
花了我一分钟的时间进行实验:)
However, you'll need to select the object and then hit backspace to see :|
但是，您需要选择对象，然后按退格键才能查看：|
