javascript - Rails 使用 javascript 自动完成

Question

我正在使用 Awesomplete 帮助自动完成 Rails 6 应用程序中的城镇列表。一切正常，但一旦选择了一个城镇，它就会在 put 字段中显示值而不是城镇名称。是否可以在选择城镇后显示名称但仍按值搜索？

表单

<%= 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”值并将其传递到位置参数中。

Controller

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

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] id，我建议你使用隐藏字段来保留 suggestion.label