/ css

Scroll dropdown menu

以前algoliaを使ってblogに検索窓を設置しました。

無事検索出来るようになって嬉しいのですが、「検索結果7個はちょっと少ない...。」そこで検索結果を増やした所、「ドロップダウンメニューが画面外まで伸びてしまう...。」と言う問題に直面したので、ドロップダウンメニューをスクロールさてみました。

やり方

意外に簡単で、CSSだけで出来ました。overflowを使い、ボックスが250px以上の場合はスクロールさせるようにしました。良いやり方なのかはわからんちん。

検索結果は7個から21個にしました。

         background-color: #fff;
          border: 1px solid #999;
          border-top: none;
 +        overflow: scroll;
 +        height: 250px;
        }
        .algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
          cursor: pointer;
 @@ -50,7 +52,7 @@
        var index = client.initIndex('インデックス名');
        autocomplete('#search-input', { hint: false }, [
          {
 -          source: autocomplete.sources.hits(index, { hitsPerPage: 7 }),
 +          source: autocomplete.sources.hits(index, { hitsPerPage: 21 }),
            templates: {
              suggestion: function(suggestion) {
                document_root = "https://ghost.ponpokopon.me/";

やったー!

CSSコード全体

.algolia-autocomplete {
  width: 80%;
  max-width: 710px;
}
.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
  width: 100%;
  min-height: 30px;
  text-indent: 10px;
}
.aa-input {
  border-radius: 20px;
  background: url(./powered-by-algolia/Algolia_logo_bg-dark.jpg) right top no-repeat;
  background-size:contain;
}
.algolia-autocomplete .aa-hint {
  color: #999;
}
.algolia-autocomplete .aa-dropdown-menu {
  width: 100%;
  background-color: #fff;
  border: 1px solid #999;
  border-top: none;
  overflow: scroll;
  height: 250px;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
  cursor: pointer;
  padding: 5px 4px;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
  background-color: #B2D7FF;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
  font-weight: bold;
  font-style: normal;
}