スマホで入力補完候補を表示させるJqueryプラグインを作成

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

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

写真 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

導入方法

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もこちらの名前で設定されています。
tsReloadTimer 300 表示内容を更新する周期を設定できます。(ms)
tsCloseTimer 500 フォームがアクティブでなくなった状態に非表示にするスピードを設定できます。(ms)

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

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

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

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

注意点

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

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

要望が多ければ、今後対応を行うかもしれません。

デモページ

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

demo.html

PCでも一応動きますが、是非スマホで動作の確認をしてみてください。

ダウンロード先はこちら

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

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

MIT ライセンスです。

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

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

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

フォローする