用JavaScript自动完成Rails

DollarChills

我正在使用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' %>

Java脚本

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)

勘误表

您需要按如下所示显式替换“ 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，我建议您使用隐藏字段来保留proposal.label

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。