Gdy w zestawie danych znajduje się długi zestaw elementów, wszystkie zostaną wyświetlone z paskiem przewijania obok nich. Czy istnieje prosty sposób, aby wyświetlić tylko top 5 i po prostu odciąć pozostałe?Ogranicz wszystkie pozycje wyświetlane przez datalistę
Na przykład: 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>
Chodź! Interesujące pytanie, +1! Dlaczego nie ma odpowiedzi !? –
Cóż, nie sądzę, że to możliwe. Możesz zmniejszyć zestaw wyświetlanych elementów poprzez dodanie innych wymagań, takich jak 'maxlength =" 4 "' lub 'pattern =" Ray [0123] \ d "' –
Należy również zauważyć, że w czasie pisania (maj 2014) '' Tag template'u jest obsługiwany tylko w Chrome, Opera Desktop i Mozilla FF. [Patrz tutaj] (http://caniuse.com/#search=template). To samo dla ['datalist'] (http://caniuse.com/#search=datalist), + częściowa obsługa IE 10+ – Tyblitz