入力補完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対応版も公開予定なのでお待ちください。

  2. tokotoko より:

    DBがSqlliteの場合利用はできませんか?
    ajaxSuggest.phpを作成してみましたが
    入力欄に入力ができません。
    (入力を受け付けません。)
    例のHTMLに直書きの分は動作しましたので使い方はあっていますが
    DBからの取得がうまくいきません。
    DBがSqlliteの場合利用はできませんか?

  3. くじら より:

    ご質問失礼致します。
    とても便利なので、使用させていただいています。
    ありがとうございます。
    以下、質問なのですが、
    ajaxで使用する際、キーダウンで候補を選択することが出来ないのですが、修正のご予定はありますか?
    よろしくお願いいたします

  4. nocho より:

    ダウンロードありがとうございます。
    返信が大変遅れて申し訳ありません。
    頂いた内容を含め、Ajax絡みの不具合がいくつか確認できたので修正いたしました。
    最新版をGithubからダウンロードいただけます。
    また何かございましたら気軽にコメントください。

  5. くじら より:

    気づくのが遅れてしまい大変申し訳ありませんでした。
    修正まことにありがとうございました。
    早速入れ替えて見ました。
    不具合が修正され、より使いやすくなりました。
    ありがとうございます。

    なのですが、最初にご質問させていただいた、パソコンで見て、かつajaxの場合、キーダウンで検索候補の選択ができない状態でした。
    今は、jqueryなど最新版を入れているのですが、そういったことも関係しているのでしょうか…。
    度々申し訳ありません。
    何卒よろしくお願い致します。

    • nocho より:

      ご指摘ありがとうございます!
      Jqueryの3.x系のバージョンの場合、使えないメソッドを呼び出してエラーがでる不具合を確認いたしました。
      現在は修正しましたので、最新のgithubに上がったjsファイルに置き換えてもらえますでしょうか。
      解決に至らなかった場合は再度コメントいただけると嬉しいです。

  6. くじら より:

    早速のご対応まことにありがとうございました。
    先日コメントさせて頂いたものと同じ環境下で、
    制作いただいたjsファイルのみを入れ替えたところキーダウンで検索候補を選択できるようになりました!
    まことにありがとうございます。

    また、追記でご質問大変失礼致します。
    キーダウンでの選択ができないケースが一定の割合で散見されたため、
    自分なりのテストをしてみたのですが、
    おそらく、入れたキーワードをエンターして決定してからキーダウンをしないと、
    一度目のキーダウンで一番下の候補に移動してしまうのではないかと思いました。

    以下具体的にご説明させていただければと思います。
    =======
    “あ” と入力した際に、
    “あい”、”あう”、”あえ”
    以上の3つの候補が表示されると仮定します。

    まず、”あ”と入力した際に、3つの検索候補はキーワードを入れた時点ですぐに表示されるかと思います。
    そこで、エンターを押し、入力した”あ”を確定した上でキーダウンすると正常に動きます。

    ですが、ajaxなので、入力の際、データベース側で曖昧検索のsqlで、ローマ字の”a”と入れても、検索候補は”あ”のときと同じものが表示されるとします。

    その際、ローマ字の”a”は、入力後、検索候補が表示されたら、エンターを押して確定をする必要が無いため、
    そのままキーダウンをするかと思います。

    そうすると、一度目のキーダウンで3つある検索候補の一番下にある”あえ”に飛んでしまい、そこで今度はキーアップすると、入力フォームに戻ってしまい、間にある “あい”、”あう”がキー操作で選択できない状態かと思います。
    =======

    長文失礼いたしました。

    お時間ある際に、ご精査いただけると幸いです。
    それでは、何卒よろしくお願い致します。

    • nocho より:

      頂いた内容の不具合も確認いたしましたので、修正したjsファイルをgithubにアップしました。
      詳しく状況を書いていただいたおかげで、素早く再現にたどり着くことができました。
      ご指摘ありがとうございます。

  7. くじら より:

    早速のご対応、まことにありがとうございます。

    無事変更させていただくことができました。
    本当に助かりました、ありがとうございます。

    また、最後に一点だけ申し訳ありません。

    検索候補をキーダウンで選択すると、

    あいうえお |
    (※ | が選択カーソルです)

    となるのですが、キーアップで前の検索候補を選択したり、入力フォームに戻ったりすると、

    | あいうえお

    となります。
    なんとなくではあるのですが、使用させていただいていて、
    この選択カーソルは、常に後ろにあったほうが使いやすいのではないかと思いました。
    (入力フォームにカーソルが合った状態で、更にキーアップした場合は除きます)

    もしも可能でしたら、ご一考いただければ幸いです。

    あくまで、使用した上での感想ですので、差し出がましく失礼致しました。

    この度は、何度も本当にありがとうございました。

  8. taloon より:

    tsAjaxUrlオプションを使いjson形式のデータを取得しています。
    検索語に色々なワードを入力しても
    入力候補には、常にサーバから受け取ったデータの最初のデータから
    順番に表示されます。

    JSに直接同じデータを書いた場合は正常に候補が出力されます。

    tsAjaxUrlを使って実際に動作するサンプルがあると有りがたいです。
    サーバ側のスクリプトはそのまま使えないケースが多いと思いますので
    シンプルなjsonデータを使ったサンプルの方嬉しいです。

    • taloon より:

      本件自己解決しました、非常に便利なツールをありがとうございました。
      typeaheadから乗り換えて使わせて頂いております。

  9. Lumis より:

    はじめまして。
    HTML標準の補完表示の遅さがどうしても解決できずに代わりを探していたところ、こちらを見つけました。機能のわかりやすさが随一でしたので、こちらのライブラリを自作のテキストエディタに使わせていただこうと思っています。

    一つだけ気になる点がございます。
    表示される候補と実際にテキストボックスにセットされる値を分離することはできませんでしょうか?
    例)表示は “HISTORY – 歴史”、実際にセットされるのは history etc

    誠に勝手ながらソースを解析し、自分なりに機能を追加してみました。
    もしよろしければ改修版ソースを寄贈いたしますのでご確認いただきたいのですが、
    どうしたらよいでしょうか?

    • nocho より:

      コメントありがとうございます!
      早速活用いただけて嬉しい限りです。
      現状は候補のテキストがそのまま表示される仕様となっております。
      提示いただいた仕様にするにはカスタマイズが必要かと思いますが、既に取り組んでいらっしゃるみたいですね。
      必要な機能だと思いますので、わたくし個人としても改修版は是非見てみたいです!
      ソースが書かれたURLを頂くか、githubなどに上げていただくか、
      Gmailのnochokinococo○gmail.comに送って頂ければ是非確認いたします。
      どうぞよろしくお願いいたします。

  10. […] 入力補完Jqueryプラグインを作成 スマホ&キーボード対応 | キノコログ […]