TIL

Today I Learned. 知ったこと、学んだことを書いていく

選択値とは別の値をテキストボックスのvalueに設定する - JQuery

github.com

devbridge/JQuery-Autocompleteを使って、Autocompleteを実装したときのメモ

onSelectを使う

suggestionsが以下のようになっていた場合

suggestions: {[
    {
        value: "山田太郎 20歳",
        data: {
            name: "山田太郎",
            age: "20"
        }
    },
    {
        value: "山田次郎 18歳",
        data: {
            name: "山田次郎",
            age: "18"
        }
    }
]}

やりたいのは「山田太郎 20歳」を選択時、テキストボックスのvalueに「山田太郎」をセットすること

$(function() {
  $('.autocomplete-horse-name').autocomplete({
    serviceUrl: '/api/v1.0/person',
    dataType: 'json',
    transformResult: function(response) {
      return {
        suggestions: $.map(response, function (item) {
          return {value: item.name + " " + item.age + "歳", data: item};
        })
      }
    },
    onSelect: function(suggestion) {
      this.value = suggestion.data.name;
    }
  })
});

onSelectで選択したときに呼ばれる処理を記述できるため、それを使う。

suggestionが選択した項目のデータ、thisが入力中のHTMLElementとなっているため、こんな感じで書ける。

参考文献