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を指定)