スマホでもキーボードでも動作する入力補完候補表示Jqueryプラグインを作成

スマートフォンで利用できるJqueryプラグインを作成しましたのでご紹介します。

【追記】2017年2月4日、パソコンの入力でも動作することも可能になりました。

サイトのコンテンツで、入力フォームの下に、入力内容に近い予測候補を表示させたいケースがありますよね?

写真 2016-04-30 2 19 22

この機能は、autocomplete(オートコンプリート)や、suggest(サジェスト)など呼ばれたりしています。

こちらをお手軽に導入できるライブラリで、Jquery UI(autocompleteウィジェット)があります。

ただ、Jquery UIでのこちらの補完機能はスマホでは使いづらく、他に自分に合ったプラグインも調べて見つからなかったので、自作することにしました。

スポンサーリンク
レクタングル(大)

日本語入力に特化させた入力補完プラグイン
「tapsuggest.js」

tapsuggest.jsの特徴

  • ひらがな⇔カタカナ、大文字⇔小文字、全角⇔半角の互換を持ち、日本語入力に特化した高精度な補完表示
  • フリガナ入力対応
  • 多様なオプション設定、リモート(Ajax)から候補取得も可能
  • cssでレイアウト変更可能、2カラムレイアウト対応
  • マルチデバイス対応

ひらがな⇔カタカナ、大文字⇔小文字、全角⇔半角の互換を持ち、日本語入力に特化した高精度な補完表示

入力内容に対して、ひらがな⇔カタカナ、大文字⇔小文字、全角⇔半角の互換を持ち、

より高い精度で候補を出力することができます。

ひらがな⇔カタカナ

写真 2016-04-30 2 27 36

大文字⇔小文字、全角⇔半角

写真 2016-04-30 20 10 29

フリガナ入力対応

漢字の候補を出したい場合などで、複数検索用語を設定することができます。

写真 2016-04-30 20 18 33

多様なオプション設定、リモート(Ajax)から候補取得も可能

各種オプションで設定を行うことで、取得件数、検索レベル、自動submitなどを調整を行うことができます。

また、ajaxでの取得も想定した設定を行うことができます。

cssでレイアウト変更可能、2カラムレイアウト対応

cssでリストの装飾が行えます。

付属のcss(TapSuggest.css)からご自由に設定を行ってください。

下の画像は、文字を太くし、ボーダーや文字色を変更したレイアウトです。

写真 2016-04-30 20 25 54

また、別でもう一つ「TapSuggest2Column.css」というcssをご用意しています。

こちらは2カラムで表示させることができます。

より多くの項目数を画面内に表示させたい場合はこちらをご利用ください。

写真 2016-04-30 20 26 29

パソコンのキーボード入力でも候補を表示(マルチデバイス対応)※追記

こちらは後追いで付けた機能になりますが、キーボード操作も考慮した仕様に変更しました。

下矢印キーで、候補を選ぶことが可能になりました。

キーボード(パソコン)入力にも対応したい場合は、「TapSuggestPc.css」を読み込んでください。

画面幅によって切り替わる設定になります。

WS000092

導入方法

cssとjsファイルを読み込んでください。

Jqueryは必ず読み込んだ上で設定をしてください。

設定方法

TapSuggestのセレクタには、入力候補を表示させるエレメントを選択してください。

また、入力対象のフォーム「tsInputElement」を必ず設定をしてください。

「tsInputElement」で選択した入力フォームを対象に、セレクタで選んだエリアに表示されるようになります。

横幅は、親要素の幅いっぱいに表示されます。

お好きなところに設置してください。

写真 2016-04-30 18 13 10

オプション

オプション名 初期値 内容
tsInputElement
※必須
セレクタの直前のinput:text要素 対象となる入力フォームのエレメントを選択してください。
tsArrayList
※Ajaxで取得しない場合必須
補完候補の検索対象となる文字列の配列で設定を行ってください。多次元配列で設定することで、漢字の候補もひらがなやアルファベットでも表示させることができます。
例:[‘田中’, ‘たなか’, ‘TANAKA’]
tsListCount 10 補完候補の最大件数を設定できます。
tsFormAutoSubmit false 表示された候補を選択(タップ)した際に、フォームを自動で送信させるか設定できます。対象となるフォームは、tsInputElementで設定したエレメントの直近の親要素となるformが対象になります。
tsRegExpAll false 入力内容に対して、前方一致ではなく、部分一致でも候補を表示させるか設定できます。デフォルトは前方一致です。
tsAjaxUrl
※Ajaxで取得する場合必須
入力内容に対して、都度ajax通信でデータを取得する場合は設定が必須となります。取得先のファイルを設定してください。json形式の配列を出力することで候補が表示されます。
tsAjaxParam ‘str’ 取得先にPOSTで渡すパラメータを設定してください。デフォルトは’str’です。
tsUlClass ‘TapSuggest’ 候補を表示させるulタグに設定されるclass名になります。付属のcssもこちらの名前で設定されています。
tsSpScroll false スマートフォンデバイスの場合、trueにすることで入力フォームにフォーカスが当たった際、入力フォーム位置を一番上までスクロールします。下の候補が見えやすくなります。

Ajaxでの候補出力方法は、PHP+MySQLで行う場合、以下のような例で使用できます。

MySQLのあいまい検索を使用し、データベースから候補を取得します。

PHPで取得する際は、必ず取得した配列に対してjsonエンコードかけて出力してください。

あくまで一例なので、ご自身の環境に合わせて設定を行ってください。

注意点

1ページに複数、補完機能の設置は想定していないため、正しく動作しません。

予めご了承お願い致します。

複数フォームがあってそれぞれの候補が違う場合、フォーカスイベント時にこのtapsuggest.jsを読み込んで頂ければ切り替えが可能です。

デモページ

こちらで動作を確認できます。

demo.html(スマホ1カラムのcss)
demo2.html(スマホ2カラムのcss)
demo3.html(パソコン&スマホ対応のcss)

ダウンロード先はこちら

githubに公開しています。Download ZIPをクリックすることでダウンロードできます。

https://github.com/nochicoco/tapsuggest.js.git

MIT ライセンスです。

初のライブラリ公開ということで、いろいろ足りない点があるかもしれません。

不明点や不具合などございましたら、気軽にプロフィールのメールアドレスからご連絡ください。

スポンサーリンク
レクタングル(大)
レクタングル(大)

フォローする

コメント

  1. クリーマー より:

    PCでの利用の場合にカーソルキーで選択できるようにならないでしょうか?

    • nocho より:

      コメントありがとうございます。PC対応版も公開予定なのでお待ちください。