入力補完jQueryプラグインを作成【スマホ&PC対応】

jQuery

入力した内容に対して、候補を表示させる「入力補完(入力補助)」機能。

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

入力補完をお手軽に導入できるライブラリは既にあったのですが(jQuery UI等)、スマホに最適化されていなかったり、日本語入力で反応しなかったりなど、なかなか理想の入力補完にできませんでした。

そのため、スマートフォンなどのモバイル端末とパソコン両方で使用できる入力補完機能が欲しく、jQueryプラグイン 「mysuggest.js」を作成しました。

以前より作成していた「tapsuggest.js」の改良版です。
より少ない記述で、かつ1つのコードで両デバイス対応の入力補完ができるようにしました。

入力補完jQueryプラグイン「mysuggest.js」の特徴

mysuggest.jsは、以下の事を意識して作りました。

  1. 軽量な動作
  2. パソコンのキーボード入力、スマホのフリック入力、両方で使える
  3. 日本語入力に強い
    全角⇔半角、ひらがな⇔カタカナ、大文字⇔小文字などを相互に検索
    振り仮名指定可能
  4. Ajaxで候補の取得が可能

デバイス問わず共通のコードで使用できるため、汎用的にお使い頂けるよう作りました。

パソコンのキーボード入力

PCの候補表示と選択の挙動です。
ひらがな入力でもカナカナの候補が表示されるため、最短の入力が可能です。
表示された候補は、矢印(↑↓)キーで候補を移動し、Enterキーで選択できます。

スマホのフリック入力

スマホの候補表示と選択の挙動です。
テキストボックスの真下に候補が表示され、タップしやすいように幅を広く候補を表示しております。
PCとスマホ共通のコードで使用できます。

実際に触ってみてください

百聞は一見に如かずということで、実際に↓の検索欄を、PC、スマートフォン共に触ってみてください。

スポーツ検索

サンプルコード

基本設定

ダウンロードした時に用意されたcssとjsファイルを読み込んでください。

jQueryプラグインなので、jQueryライブラリは事前に読み込む必要があります。

<link rel="stylesheet" href="css/mysuggest.css">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script>
<script src="js/Jquery.mysuggest.js"></script>

そして、入力候補をセレクタに指定して、プラグインメソッドを設定します。

<input type="text" class="test" autocomplete="off">
<script>
$(function(){
    $('.test').MySuggest({
        msArrayList : ['サッカー', ['野球', 'やきゅう'], 'アメフト', 'スキー', 'バレーボール', 'ラクロス', 'ラグビー', 'バスケットボール', 'ゴルフ', 'テニス', 'バドミントン', 'ソフトボール', 'ビリヤード', 'ボウリング', ['競泳', 'きょうえい'], 'カーリング', ['卓球', 'たっきゅう'],
                        'ドッジボール', 'ダーツ', 'フットサル', 'クリケット', 'ラケットボール', 'ロードレース', 'ハンマー投', 'アーチェリー', 'オートレース', ['競馬', 'けいば']]
    });
});
</script>

msArrayListに配列で、入力候補で表示させたいキーワードを設定します。

配列の中に['野球', 'やきゅう']と入れ子で配列を設定することで、フリガナ入力対応し、1つの用語に対して複数キーワードを設定できます。

設定オプション

MySuggest()で設定できるオプション一覧です。

オプション名 初期値 内容
msArrayList
※Ajaxで取得しない場合必須
補完候補の検索対象となる文字列の配列で設定を行ってください。多次元配列で設定することで、漢字の候補もひらがなやアルファベットでも表示させることができます。
例:['田中', 'たなか', 'TANAKA']
msListCount 10 補完候補の最大件数を設定できます。
msMinLength 1 検索を実行する最低の文字数です。
msRegExpAll false 入力内容に対して、前方一致ではなく、部分一致でも候補を表示させるか設定できます。デフォルトは前方一致です。
msAjaxUrl
※Ajaxで取得する場合必須
入力内容に対して、都度ajax通信でデータを取得する場合は設定が必須となります。取得先のファイルを設定してください。json形式の配列を出力することで候補が表示されます。
msAjaxParam 'str' 取得先にPOSTで渡すパラメータを設定してください。デフォルトは'str'です。

Ajax取得時の書き方

ajaxからサーバーのデータベースから値を取得する場合の処理です。

<input type="text" class="test" autocomplete="off">
<script>
$(function(){
    $('.test').MySuggest({
        msAjaxUrl : 'https://kinocolog.com/ajax/search.php' //存在しないURLです
    });
});
</script>

msAjaxUrlに、ajaxで接続したいURLを設定してください。

次に、ajaxにより検索対象文字がpostされ、PHPのMySQL接続(PDO)を例にした取得処理です。

//pdoクラスの生成は省略します

$search = $_POST['str'];

$sql = "SELECT sports_name
        FROM sports
        WHERE sports_name LIKE :search";
        
$sth = $dbh -> prepare($sql);
$sth -> bindValue(':search', $search.'%', PDO::PARAM_STR);
//$sth -> bindValue(':search', '%'.$search.'%', PDO::PARAM_STR); //前方後方どちらも検索対象にする場合
$sth -> execute();

$arySuggest = $sth -> fetchAll(PDO::FETCH_COLUMN);

echo json_encode($arySuggest);

Ajaxの取得方法及び、PDOのfetchによる取得方法の知識も必要になるので、下記の解説記事も是非ご確認ください。

jQueryでAjaxの使い方【サンプルコードで解説】
jQueryでAjax通信を行う処理についてまとめました。PHPへデータの送信とPDOを使用したMySQLデータベースの結果を取得する方法もサンプル付きで解説しております。
【PHP】PDOのfetchで取得できる配列パターン一覧
PHPのPDOオブジェクトのメソッドfetchとfetchAllで取得できる配列の種類を一覧でまとめました。各種サンプルコードのデモもあわせて掲載しております。

オリジナルイベント処理

選択時にイベントを発火

スマホで候補をタップした時、パソコンで候補をクリックした時またはキーボードで選択した時に、イベントを発火できます。

$('.test').on('selected', function(){
    //イベント処理 選択した文字をアラート
    alert($(this).val());
});

入力して、事前に用意した候補と一致した時にイベントを発火

用意しておいた候補と一致する入力を行った場合にイベントを発火できます。

$('.test').on('matched', function(){
    //イベント処理 入力した文字をアラート
    alert($(this).val());
});

ダウンロードはこちら

「mysuggest.js」のダウンロードは下記のボタンから行えます。

ダウンロードはこちら

細かいデザインの調整などは付属のcssから変更をお願いします。

不具合などがありましたらコメントかメールで受け付けます。

以上、入力補完jQueryプラグインを作成、でした。

コメント

  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プラグインを作成 スマホ&キーボード対応 | キノコログ […]

タイトルとURLをコピーしました