テキストボックスと検索候補以外の要素をクリックしたときのイベントを一行ずつ解説【JavaScript・jQuery】

こういうやつですね

利用例としては、

• テキストボックスにフォーカスが当たって履歴の候補を表示
• テキストボックスの入力を始めると検索候補が表示

今回はテキストボックスと候補以外をクリックしたとき、候補を非表示にしたいと思います。

キーは

Element.closest()

です。
developer.mozilla.org

// テキストボックス
<input type="text" class="search-box" value="" autocomplete="off" placeholder="検索ボックス">

// 候補
<ul class="candidate">
  <li>hoge</li>
  <li>huga</li>
  <li>foo</li>
</ul>

.none {
  display: none;
}

$(document).on('click',(e) {
  if(!$(e.target).closest('.search-box,.candidate').length) {
    $(".candidate").addClass("none");
  }
});

JSの処理を順番に解説します

1. e.target : クリックした要素の
2. e.target.closest('.search-box .candidate') : 親要素までにテキストボックスまたは候補が
3. !$(e.target).closest('.search-box .candidate').length : なかったら(0だったら)
4. $(".candidate").addClass("none") : 候補を非表示にする

以上です