datalist tarafından görüntülenen toplam girişleri sınırla

Question

Veri dosyasında uzun bir öğe kümesi olduğunda, bunların hepsi yanında bir kaydırma çubuğuyla görüntülenir. Sadece ilk 5'i görüntülemenin ve diğerlerini kesmenin kolay bir yolu var mı?

Örneğin

: bazı modern javascript ile 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> 

Answer 1

ve böyle bir şey yapabileceğini html.

İşte belge var:

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

Ve burada 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); 
}); 

Ve burada canlı örnek: Gel http://jsfiddle.net/gildean/yxafa/6/