限制datalist显示的总条目 [英] Limit total entries displayed by datalist
本文介绍了限制datalist显示的总条目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当一个数据列表中有一长串元素时，它们都将显示在它们旁边的滚动条上。有没有简单的方法只显示前5名，而只是将其他人关闭？
例如： http://jsfiddle.net/yxafa/
<输入type =textname =searchid =searchplaceholder =type'r'list =searchresultsautocomplete =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>
解决方案
使用一些现代的javascript和html你可以做类似的事情
以下是文档：
< 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 =textname =searchid =searchplaceholder =type'r'list =searchresultsautocomplete =off/>
< datalist id =searchresults>< / datalist>
以下是js：
var search = document.querySelector（'＃search'）;
var results = document.querySelector（'＃searchresults'）;
var templateContent = document.querySelector（'＃resultstemplate'）。content;
search.addEventListener（'keyup'，函数处理函数（事件）{
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）;
}）;
以下是一个实例：
http://jsfiddle.net/gildean/yxafa/6/
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>
解决方案
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/
这篇关于限制datalist显示的总条目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
