使用JavaScript实现Rails自动完成功能

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)

- DollarChills

---

理想情况下，自动完成输入框应显示位置名称，并根据上述片段将其值传递到服务器。您遇到了什么问题？ - Amit Patel

它会在自动完成中显示城镇名称。一旦选择了一个城镇，它会在输入框中显示数字值，例如100而不是Town 1。 - DollarChills

Answer 1

你需要明确将“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进行搜索，并且想在文本框中显示“Town 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
  }
 });

如果需要使用params[:location]，我建议您使用隐藏字段来保存suggestion.label。

- errakeshpd

Answer 2

文档中在“基本用法”部分提供了一个示例：

// 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" />

- 3limin4t0r