検索フォームにフォーカスした時、リンクをクリックできるメニューを表示

2018.08.09

検索フォームにフォーカスしたときに、人気キーワードなど表示させるメニューの作り方です。

検索フォームのフォーカスが外れた時の動作はメニュー内のリンク以外などをクリックした場合にメニューを閉じるように設定してあります。

<div class="search-area">
<input type="text" id="SearchInput" placeholder="フリーワード検索">
<input type="submit" name="submit" value="検索" id="SearchButton">

<!--フォームにフォーカスした時に表示されるメニュー-->
 <figure class="keyword" style="display: block;">
   <figcaption>人気キーワード</figcaption>
      <ul class="clear">
         <li><a href="#">・人気キーワード</a></li>
         <li><a href="#">・人気キーワード</a></li>
         <li><a href="#">・人気キーワード</a></li>
      </ul>
  </figure>
</ul>

<figcaption>人気キーワード</figcaption>

<li><a href="#">・人気キーワード</a></li>

</ul>

</figure>

</ul>

■CSS

.search-area {
    position: relative;
}
input#SearchInput {
    width: 420px;
    height: 36px;
    box-sizing: border-box;
    border-radius: 5px;
    padding-right: 4em;
    padding-left: 3px;
}
#SearchButton {
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    background-position: center;
    width: 24px;
    height: 24px;
    display: block;
    margin: auto;
    padding: 0 !important;
}

.search-area {

position: relative;

}

input#SearchInput {

width: 420px;

height: 36px;

box-sizing: border-box;

border-radius: 5px;

padding-right: 4em;

padding-left: 3px;

}

#SearchButton {

position: absolute;

right: 12px;

top: 0;

bottom: 0;

background-position: center;

width: 24px;

height: 24px;

display: block;

margin: auto;

padding: 0 !important;

}

■jQuery

<script>
$(function(){
　　$('input#SearchInput').focus(function(){
             $('.keyword').show();
       })
$(".keyword,.keyword *").click(function(e){
 e.stopPropagation();
});
       $("html, body, body *").click(function(e){
	 if($(this).attr("id") === "SearchInput"){
	   e.stopPropagation();
	 }
	 if(!$(this).hasClass("search-area") && !$(this).hasClass("keyword") && !$(this).is(".keyword *") && $(this).attr("id") !== "SearchInput"){
	   $('.keyword').hide();
         }
       });
});
</script>