Rails автозаполнение с помощью JavaScript

Question

Я использую Awesomplete, чтобы помочь с автозаполнением списка городов в приложении rails 6. Все работает как надо, но как только город выбран, он показывает значение в поле ввода вместо названия города. Можно ли отобразить название после выбора города, но поиск по значению?

Форма

<%= text_field_tag(:location, value = nil, html_options = {class: 'form-control', id: 'myLocation', placeholder: 'Start typing a town name'}) %>
<%= submit_tag 'Search' %>

Javascript

var input = document.getElementById("myLocation");
    new Awesomplete(input, {
        list: [['Town 1',100],['Town 2',200]...]
    });

Как только поиск реализован, он берет значение «100» или «200» из массива и передает его в параметры местоположения.

Контроллер

data = HTTParty.get("https://www.urlofapi.com/params[:location]}")
@ddcalc = JSON.parse(data.body)

Answer 1

В документации есть пример для этого в разделе " Основное использование ":

// Show label and insert label into the input:
new Awesomplete(input, {
    list: [
        { label: "Belarus", value: "BY" },
        { label: "China", value: "CN" },
        { label: "United States", value: "US" }
    ],
    // insert label instead of value into the input.
    replace: function(suggestion) {
        this.input.value = suggestion.label;
    }
});

Применение этого для вашего данного примера приведет к:

var input = document.getElementById("myLocation");
new Awesomplete(input, {
    list: [['Town 1', 100], ['Town 2', 200]],
    replace: function (suggestion) {
        this.input.value = suggestion.label;
    }
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>

<input id="myLocation"    type="text" />

Это может привести к отправке метки, а не значения. Однако вы можете выбрать решение, в котором вы устанавливаете отдельный (скрытый) ввод, который обновляется значением, принадлежащим метке.

const locations = { "Town 1": 100, "Town 2": 200 },
      locationLabel = document.getElementById("locationLabel"),
      locationValue = document.getElementById("locationValue"),
      setLocationValue = function (event) {
        const label = event.target.value;
        locationValue.value = locations.hasOwnProperty(label)
                            ? locations[label]
                            : "";
      };

new Awesomplete(locationLabel, { list: Object.keys(locations) });
locationLabel.addEventListener("input", setLocationValue);
locationLabel.addEventListener("awesomplete-selectcomplete", setLocationValue);

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>

<input id="locationLabel" type="text" />
<input id="locationValue" type="text" placeholder="hide this input" />

Answer 2

Вам необходимо явно заменить «this.input.value», как показано ниже

new Awesomplete(input, {
  list: [
    { label: "Town 1", value: "100" },
    { label: "Town 2", value: "200" }
  ],
  replace: function(suggestion) {
    this.input.value = suggestion.label; // You can assign label or value as per your need
  }
});

Если вы хотите выполнить поиск по 100, 200 и хотите отобразить Город 1 в текстовом поле, тогда

new Awesomplete(input, {
  list: [
   { label: "100", value: "Town 1" },
   { label: "200", value: "Town 2" }
  ],
  replace: function(suggestion) {
    this.input.value = suggestion.value; // You can assign label or value as per your need
  }
 });

если этот параметр [: location] необходим, если я предлагаю вам использовать скрытое поле, чтобы сохранить offertion.label