【HTML】datalistタグで表示している件数を制限したいです。

Question

前提・実現したいこと

datalistを使用しているのですが、現在、全権が表示されているのを上位2件までを表示するように制限したいのですが、方法がわかりません。
参考となるURL又は方法を教えて頂きたく思います。
わかる方がいらっしゃいましたらご教授頂けると幸いです。

該当のソースコード

<label>
  好きなスポーツは？
  <input name="fav_sports" list="sports_list">
  <datalist id="sports_list">
    <option value="サッカー">
    <option value="野球">
    <option value="ゴルフ">
    <option value="マラソン">
    <option value="テニス">
  </datalist>
</label>

Comments

[m.ts10806]

調べて何も出ないようには思いませんが、そもそも調べてませんか？（何も調べたこと試したことが書かれてないので）

[miyabi_pudding]

上位2件だけにすればよいのでは？

[m.ts10806]

それに前提や背景も謎です。
どこからきた情報がどう表示されてるのか
制限はいいとして、他にどういう仕様があるのか

単に表示だけなら本当に2件だけ表示すればいいですし。

Answer 1

2021年5月現在、<datalist>には表示件数を制限するような機能はありません。中の表示したくない<option>を削除してください。

Comments

[tanakamaro]

ありがとうございます！
例えば、最初は上位2つのサッカーと野球を表示しており、入力があった場合はサジェスト結果の上位2つを表示したい場合はどうすればよろしいでしょうか？

[int32_t]

<input> の 'input' イベントで value に従って <datalist> の中身を入れ替える、でできそうですね。

[tanakamaro]

$('input[name="fav_sports"]').on('input', function () {

});
中身の処理がわかりません。。どのような処理になりますでしょうか？

[int32_t]

どこかに<datalist>に入れる候補の完全なリストを持っておいて、

* イベントハンドラの中では、まず問答無用に <datalist>の中身をすべて消す。そのあと、
* <input> の value が空ならリストの先頭2つだけ<datalist>に<option>として足す。
* <input> の value が空ではないなら、リスト内からマッチするものを2つだけ抽出して、<datalist>に<option>として足す。

[tanakamaro]

3つ目の空でないならの処理がどのようにすればいいのかわからないです。。。

[int32_t]

これの実装方法がわからない、というのは別の質問にしたほうが良いかもですね。

[tanakamaro]

新しく質問を投稿させて頂きました。
大変恐縮ですが、お時間あります時にご確認頂けると幸いです。

Answer 2

そもそもdatalistがスタティックなHTML要素で上位２件しか必要ないなら
ページがローダされた時点で3位以下を削除してしまえば良いでしょう

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('datalist').forEach(x=>{
    let n;
    while(n=x.querySelector('option:nth-child(3)')) n.remove();
  });
});
</script>
<label>
  好きなスポーツは？
  <input name="fav_sports" list="sports_list">
  <datalist id="sports_list">
    <option value="サッカー">
    <option value="野球">
    <option value="ゴルフ">
    <option value="マラソン">
    <option value="テニス">
  </datalist>
</label>
<label>
  好きな食べ物は？
  <input name="fav_food" list="food_list">
  <datalist id="food_list">
    <option value="カレー">
    <option value="ハンバーグ">
    <option value="ラーメン">
    <option value="焼き肉">
  </datalist>
</label>