suggest.js

サンプル6:スクロール表示あり

suggest.jsを使った、入力補完の簡単なサンプルです。(スクロール表示あり)

suggest.jsの説明は、「suggest.js - 入力補完ライブラリ」を参照ください。


サンプル

下記に入力してみてください。(aなど)


サンプルの内容

new Suggest.Local("text", "suggest", list, {dispAllKey: true});
#suggest {
  position: absolute;
  background-color: #FFFFFF;
  border: 1px solid #CCCCFF;
  width: 250px;
  height: 80px;
  overflow: auto;
}
<div id="suggest" style="display:none;" tabindex="-1"></div>
  • 補完候補のエリアのstyleで、height、overflowの指定により、表示項目数が多くなった場合にスクロールバーを出すことができます。
  • 補完候補のdivに対して、tabindexを指定する必要があります。(指定しておかないと、Chromeでスクロールバーを選択した際に、補完エリアが消えてしまいます)
  • オプションの指定無しなので、部分一致、大文字/小文字の区別なしで、補完候補が検索されます。
  • CTRL+↓(OperaではCTRL+ALT+↓)で、補完候補を全表示します。(オプションでdispAllKey:trueを指定)