リストのいくつかの項目を検索バーに表示する

ハンス

私はいくつかのリストを持っています。ListA:item1、item2、…ListB:item1、item2、

アイテムをクリックすると、検索バーに値として表示されます。異なるリストのいくつかの項目を値として検索バー追加する必要があります。現在のように、アイテムをクリックすると、現在の値が検索バーに置き換えられるだけです。

たとえば、検索バーに次のように表示できます。itemA1itemB2…

コードは次のとおりです。

var items = document.getElementById("index");
var item = items.getElementsByTagName("h3");
for(var i=0; i<item.length; i++) {
  item[i].addEventListener("click", function(e) {
    document.getElementById("search").value = (this.textContent || this.innerText);
    recherche();
  });
}

誰かがこれについて私を助けることができれば、それは大いにありがたいです!ありがとうございました

Niklesh Raut

私はあなたがこのようなものが欲しいと思います。

var item = document.querySelectorAll("#index h3");
itemArr = [];
for(var i=0; i<item.length; i++) {
  item[i].addEventListener("click", function(e) {
     var itemVal =  (this.textContent || this.innerText);
     var index = itemArr.indexOf(itemVal);
     if(index == -1){
			  itemArr.push(itemVal);
     }else if (index > -1) {
        itemArr.splice(index, 1);
     }
     document.querySelector("#search").value = itemArr.join(",");
  });
}

function clearAll(){
  itemArr = [];
  document.querySelector("#search").value = "";
}
h3{
  cursor:pointer;
}
.delete{
  cursor:pointer;
  color:red;
}
<input type="text" id="search"> <span class="delete" onclick="clearAll()">X</span>
<div id ="index">
<h3>item A1</h3>
<h3>item A2</h3>
<h3>item B1</h3>
<h3>item B2</h3>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

差分リストの最後の項目を検索する

分類Dev

VSCode:いくつかのデフォルトメニュー項目を非表示にする

分類Dev

項目の長さに基づいて Python リスト内のいくつかのエントリをマージする

分類Dev

検索した項目が見つからなかった後にリスト ビューが空になり、検索した項目をクリアした後も空のままになる

分類Dev

特定のリスト項目の下に内部項目を表示しますか?

分類Dev

リスト内のいくつかの特定の項目で追加情報を提供する

分類Dev

別のリスト内の1つのリストから各項目を検索/照合するための優れた方法

分類Dev

多くのリストからチェックボックス項目の一部のみを表示するにはどうすればよいですか?

分類Dev

リストの2つの項目を表示し、他の項目を折りたたむにはどうすればよいですか?

分類Dev

フィールド値が入力配列のいくつかの項目と一致するmongodb Documentを検索します

分類Dev

残りの項目に影響を与えずにリストから1つの項目を削除するにはどうすればよいですか?

分類Dev

やることリストに項目を表示するのが難しい

分類Dev

「すべて」の項目を検索ツールバーの選択メニューに入れるにはどうすればよいですか?

分類Dev

いくつかの項目が欠落している値で辞書のリストをソートします

分類Dev

Javaのリストから多くの項目を効率的に(パフォーマンス)削除する方法は?

分類Dev

いくつかのバイナリ検索ツリートラバーサルがポストオーダーまたはインオーダーに属することを認識する方法は?

分類Dev

メニューリストのどの項目がMaterialUI Reactで選択されているかを表示するにはどうすればよいですか?

分類Dev

ネストされた2番目のリストの1つのリストから要素を検索する

分類Dev

少なくとも1つのチェック項目について複数のチェックリストボックスを検証します

分類Dev

検索項目が見つからない場合に表示されるメッセージ ボックス

分類Dev

VSTS:バックログボードの作業項目に関連するテストを表示するにはどうすればよいですか?

分類Dev

リストの項目を検索し、各検索をファイルに保存します

分類Dev

2つのリストを項目ごとに比較する

分類Dev

vimで、検索パターン(最後の検索ではなく最後から2番目の検索パターン)をバッファーに保持し、それを新しい検索で使用するにはどうすればよいですか?

分類Dev

VSTSでフォローしている作業項目のリストを表示しますか?

分類Dev

リスト内包表記:入力リストの項目ごとに2つの項目を作成しますか?

分類Dev

コードモジュール(.cs)をリストボックスの項目として表示するにはどうすればよいですか?

分類Dev

各列のリストの各項目をループするにはどうすればよいですか?

分類Dev

最初の項目を除くリストのすべての項目をforループする方法

Related 関連記事

  1. 1

    差分リストの最後の項目を検索する

  2. 2

    VSCode:いくつかのデフォルトメニュー項目を非表示にする

  3. 3

    項目の長さに基づいて Python リスト内のいくつかのエントリをマージする

  4. 4

    検索した項目が見つからなかった後にリスト ビューが空になり、検索した項目をクリアした後も空のままになる

  5. 5

    特定のリスト項目の下に内部項目を表示しますか?

  6. 6

    リスト内のいくつかの特定の項目で追加情報を提供する

  7. 7

    別のリスト内の1つのリストから各項目を検索/照合するための優れた方法

  8. 8

    多くのリストからチェックボックス項目の一部のみを表示するにはどうすればよいですか?

  9. 9

    リストの2つの項目を表示し、他の項目を折りたたむにはどうすればよいですか?

  10. 10

    フィールド値が入力配列のいくつかの項目と一致するmongodb Documentを検索します

  11. 11

    残りの項目に影響を与えずにリストから1つの項目を削除するにはどうすればよいですか?

  12. 12

    やることリストに項目を表示するのが難しい

  13. 13

    「すべて」の項目を検索ツールバーの選択メニューに入れるにはどうすればよいですか?

  14. 14

    いくつかの項目が欠落している値で辞書のリストをソートします

  15. 15

    Javaのリストから多くの項目を効率的に(パフォーマンス)削除する方法は?

  16. 16

    いくつかのバイナリ検索ツリートラバーサルがポストオーダーまたはインオーダーに属することを認識する方法は?

  17. 17

    メニューリストのどの項目がMaterialUI Reactで選択されているかを表示するにはどうすればよいですか?

  18. 18

    ネストされた2番目のリストの1つのリストから要素を検索する

  19. 19

    少なくとも1つのチェック項目について複数のチェックリストボックスを検証します

  20. 20

    検索項目が見つからない場合に表示されるメッセージ ボックス

  21. 21

    VSTS:バックログボードの作業項目に関連するテストを表示するにはどうすればよいですか?

  22. 22

    リストの項目を検索し、各検索をファイルに保存します

  23. 23

    2つのリストを項目ごとに比較する

  24. 24

    vimで、検索パターン(最後の検索ではなく最後から2番目の検索パターン)をバッファーに保持し、それを新しい検索で使用するにはどうすればよいですか?

  25. 25

    VSTSでフォローしている作業項目のリストを表示しますか?

  26. 26

    リスト内包表記:入力リストの項目ごとに2つの項目を作成しますか?

  27. 27

    コードモジュール(.cs)をリストボックスの項目として表示するにはどうすればよいですか?

  28. 28

    各列のリストの各項目をループするにはどうすればよいですか?

  29. 29

    最初の項目を除くリストのすべての項目をforループする方法

ホットタグ

アーカイブ