HTML5になって、さまざまな要素や属性が追加され、HTML4の頃にjavascriptを使って実装していた機能が簡単に利用できるようになりました。

このページでは、HTML5で追加されたdatalist要素とinput要素のlist属性を使って、input欄にフォーカスしたとき、入力候補を一覧表示させています。具体的には、idを付けたdatalist要素を使ってあらかじめ入力候補を　並べておき、同じidをinput要素のlist属性に指定することで、実装しています。また、現時点ではブラウザによってやや動きが違っていて、Google Chromeの場合はフォーカスした際、下向き矢印が表示されて明示的に入力候補があることを知らせます。

入力候補表示のサンプル

入力候補表示のサンプルのhtmlソース

<form>
  <fieldset>
    ご利用される店舗；
    <input type="text" name="q" placeholder="本店、支店名" list="tenpo">
    <datalist id="tenpo">
        <option value="新宿本店">
        <option value="中野坂上支店">
        <option value="荻窪駅前支店">
        <option value="三鷹駅ビル支店">
        <option value="高円寺北口支店">
        <option value="吉祥寺支店">
    </datalist>
    <input type="submit" value="送信">
  </fieldset>
</form>