问题：

限制datalist显示的总条目数

东郭凯捷

2023-03-14

当数据列表中有一组很长的元素时，它们都会显示，旁边有一个滚动条。有没有一种简单的方法可以只显示前5名，而不显示其他的？

例如：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>

共有3个答案

能文华

2023-03-14

js prettyprint-override">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);
});

<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>

郏瀚

2023-03-14

没有javascript示例：

  <input list="site" name="f" minlength="2" style="height:5.1em">
  <datalist id="site" style="height:5.1em;overflow:hidden">

花了我一分钟：）

这使用CSS样式和HTML属性。PS：最小长度应能防止空提交。但是，您需要选择对象，然后单击backspace以查看：|

杜轩昂

2023-03-14

使用一些现代的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="text" name="search" id="search"  placeholder="type 'r'" list="searchresults" autocomplete="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', 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);
});

这里有一个活生生的例子：http://jsfiddle.net/gildean/yxafa/6/

类似资料：

限制数据列表显示的总条目

问题内容：当数据列表中有一长串元素时，所有元素都将显示，并在其旁边带有滚动条。有没有一种简单的方法可以只显示前5个，而仅切掉其他5个？问题答案：使用一些现代的javascript和html，您可以执行以下操作。这是文档：这是js：
Datalist-仅显示x数量的选项

所以我有一个html数据列表，它包含了几乎6000个选项，类似下面的示例。问题是它在你的浏览器上打开了很多选项，我一次只需要10个就可以看到，而且它需要是一个在你开始打字时自动完成的字段有没有办法只显示列表中返回的前10个选项？我发现这篇文章从3年前，但它是太慢，我的选择量使用。希望有人找到更好（更快）的解决方案，或者至少是另一种解决方案。
使用ng-repeat和limitTo限制显示的可见项目数

问题内容：我正在尝试将结果集限制为固定数量。我可以与一起使用，但这会限制项目，无论它们当前的可见性如何，并从DOM中删除项目。我想限制所有可见项目，同时将所有内容保留在DOM中。这是我当前的代码。我的目标是即使列表中包含500个项目，也始终不超过50 个项目。最初将限制为50个项目，但是如果我过滤列表（通过修改某些项目上的item.visible），该列表将永远不会显示50-500范围内的项
如何限制chart.js?中显示的点数

我的图表中x轴上的点太多。我想限制显示点的最大值为100。但同时仍然显示相同的图表。完全相同的图表-但点数较少。我的图表截图有太多的点我不知道如何在服务器端用PHP实现它，所以我在想在chart.js中是否有客户端的解决方案？
如何在datalist HTML5中不显示值？

我正在创建实时搜索功能。如果用户输入文本，搜索功能启动，发出请求并获得结果。每个结果都是datalist中的一个单独选项，该选项是动态添加的。每个结果都包含一个我想要显示的字段“display_name”。不幸的是，“display_name”并不总是包含用户输入的确切文本。数据集筛选结果，并不显示所有结果。我的想法是在value字段中输入与用户输入相同的值--这样所有的结果都将显示出来。不幸的是
Tkinter条目未显示textvariable的当前值

问题内容：考虑以下代码：我们期望出现在条目中的值，但实际上不会出现。奇怪的是，如果我将语句放入按钮的回调函数中，则将显示的值。这是由Python中的某种局部变量优化引起的错误吗？我该怎么做才能确保总是在条目中出现的值？请为我的英语不好而处决我。问题答案：它正在收集垃圾。您可以删除函数（也不应像这样嵌套函数）或者，如果要保留该功能，则将stringvar设置为tk的属性或将其设置为

限制datalist显示的总条目数

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档