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

2019年8月29日2023年3月5日

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

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

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

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

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

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

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

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

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()で設定できるオプション一覧です。

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通信を行う方法【サンプルコードで解説】

【PHP】PDOのfetchで取得できる配列パターン一覧

オリジナルイベント処理

選択時にイベントを発火

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

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

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

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

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

ダウンロードはこちら

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

ダウンロードはこちら

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

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