jQueryUI の Autocomplete でサジェスト表示と選択時の表示を変える方法

jQuery UI Autocomplete のサジェスト表示と選択時の表示を変える方法 技術ネタ

jQuery UI の Autocomplete で、サジェストに表示されたものを選択した時に、選択した内容と違う内容をテキストボックスに表示させる方法についてです。

前提としているjQueryのバージョン
jQuery 3.3.1
jQuery UI 1.12.1


実現方法方

簡単に言うと、sourceのデータを「label」「value」に分けるだけです。

例えば、

var data = [
    { 'label': 'PHPです', 'value': 'PHP' }
];

このようなデータを source に指定して動作させると、サジェストには「PHPです」と表示されますが、それを選択すると「PHP」となります。

こんな感じで、label,value で分けると、Autocomplete が勝手にやってくれます。

具体的なサンプル

上で説明したものを使ったサンプル(HTML)は以下になります。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>サンプル</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>

<body>
    <h1>サジェストに表示される内容と違うものを選択させるサンプル</h1>
    <input type="text" id="input1" style="width:300px" />
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        // サジェストデータ
        var data = [
            { 'label': 'PHPです', 'value': 'PHP' },
            { 'label': 'C#です', 'value': 'C#' },
            { 'label': 'Perlです', 'value': 'Perl' },
            { 'label': 'Javaです', 'value': 'Java' },
            { 'label': 'Pythonです', 'value': 'Python' }
        ];
        // autocomplete設定
        $("#input1").autocomplete({
            source: data
        });
    });
</script>

</html>

実際に試してもらえればわかりますが、サジェストには「xxです」と表示されますが、選択すると「です」が消えたものになります。

最後に

Webサイトを構築していると、サジェストは要望として結構出てきます。
その際に、今回のようにサジェストに表示するものと、選択した結果に異なるもの表示したい場合もあるかと思います。

同じような悩みがある方は参考にしてください。