提交表格时从自动完成字段中获取数据

发布于 2025-02-02 14:44:08 字数 5502 浏览 3 评论 0原文

I’m seeking some help with an autocomplete text field that I added to an existing data entry form. I want the selected value to be posted back to the database when the form is submitted. The form was built as a scaffold and then I added a new autocomplete text field using the instructions at https://joelc.io/dynamic-autocomplete-rails-6.
I had to make some modifications, but so far, so good. The autocomplete field populates with data from my database, and the form works as expected.
What I want to do now is to have the autocomplete field replace or become one of the form fields so that the selected value is posted back to the database, and I don’t know how to do this, and I don’t mind doing the research, but I don’t know where to start. I would appreciate if someone could point me in the right direction.
My initial guess is that either the two fields can be combined into one where the listener code for the autocomplete function recognizes the field and it also gets posted when the form is submitted, or alternatively, the form field is hidden and the value is updated once a value is selected in the autocomplete field.
The autocomplete function has code in several places and I still have not wrapped my head around how it all works, but I’ve included the quickentry.js code which might be relevant, and the source of the 2 fields in the _quickentryform.html.erb partial.

      <div class="field">
        <%= form.label :PayTo %>
        <%= form.text_field :PayTo %>
      </div>

  <input type="search" placeholder="Enter payto..." data-behavior="autocomplete">

这是来自QuickEntry.js 5/30的代码

/*
Here, jQuery is telling the browser to: (1) wait until turbolinks finishes loading, (2) apply the easyAutocomplete method to all inputs where the data-behavior attribute equals autocomplete, (3) and pass it the data stored in the options variable.
*/

document.addEventListener("turbolinks:load", function() {
  
  //console.log("Listener called");
  $input = $('*[data-behavior="autocomplete"]')

  var options = {
    url: function(phrase) {
      return "/quickentry/search.json?q=" + phrase;
    },
    getValue: "payto",
  };

  $input.easyAutocomplete(options);

});

- 添加一些生成的源代码为例 - 我修剪了一些字段以使其短。这两个相关字段是付费和以下自动完成字段。

再次感谢。

<!DOCTYPE html>
<html>
  <head>
    <title>Account Reconciliation</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="uVmeTTbYqtuD8grruvnPgRTujDk9waoXuFfKZXSh2002JyT827AeTobcK82w3IADilRTtHNYjbxbf_8X_CVxDw" />
    

    <link rel="stylesheet" media="all" href="/assets/application.debug-f674dfbf9ba642b5bd0b7af42a29530b1811c4c9e5bb0ca12863bee4b4af3819.css" data-turbolinks-track="reload" />
    <script src="/packs/js/application-a77022edd8841e243842.js" data-turbolinks-track="reload"></script>
  </head>

  <body>
    <h1>Quick transaction entry form</h1>

<form action="/transactions" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="sRdVtu6qR1CfBqnIEAGccccS8Pvt1N8n5taGMGG8rtNZupv82CFfCOXYF1hIQoXiRyj35uGYEsh0ujkGM6_PZw" autocomplete="off" />

  <div class="field">
    <label for="transaction_AcctNum">Acctnum</label>
    <input type="number" name="transaction[AcctNum]" id="transaction_AcctNum" />
  </div>

  <div class="field">
    <label for="transaction_Amount">Amount</label>
    <input type="text" name="transaction[Amount]" id="transaction_Amount" />
  </div>

  <div class="field">
    <label for="transaction_PayTo">Payto</label>
    <input type="text" name="transaction[PayTo]" id="transaction_PayTo" />
  </div>

  <input type="search" placeholder="Enter name..." data-behavior="autocomplete">

  <div class="field">
    <label for="transaction_Description">Description</label>
    <input type="text" name="transaction[Description]" id="transaction_Description" />
  </div>
  <div class="field">
    <label for="transaction_Notes">Notes</label>
    <input type="text" name="transaction[Notes]" id="transaction_Notes" />
  </div>


  <div class="actions">
    <input type="submit" name="commit" value="Create Transaction" data-disable-with="Create Transaction" />
  </div>
</form>

<a href="/transactions">Back</a>

  <script async nonce="" type="text/javascript" id="mini-profiler" src="/mini-profiler-resources/includes.js?v=35a79b300ab5afa978cb59af0b05e059" data-css-url="/mini-profiler-resources/includes.css?v=35a79b300ab5afa978cb59af0b05e059" data-version="35a79b300ab5afa978cb59af0b05e059" data-path="/mini-profiler-resources/" data-current-id="s6b24c933wlluqdver61" data-ids="s6b24c933wlluqdver61" data-horizontal-position="left" data-vertical-position="top" data-trivial="false" data-children="false" data-max-traces="20" data-controls="false" data-total-sql-count="false" data-authorized="true" data-toggle-shortcut="alt+p" data-start-hidden="false" data-collapse-results="true" data-html-container="body" data-hidden-custom-fields="" data-turbo-permanent="false"></script>
</body>
</html>

原文

I’m seeking some help with an autocomplete text field that I added to an existing data entry form. I want the selected value to be posted back to the database when the form is submitted.
The form was built as a scaffold and then I added a new autocomplete text field using the instructions at https://joelc.io/dynamic-autocomplete-rails-6.
I had to make some modifications, but so far, so good. The autocomplete field populates with data from my database, and the form works as expected.
What I want to do now is to have the autocomplete field replace or become one of the form fields so that the selected value is posted back to the database, and I don’t know how to do this, and I don’t mind doing the research, but I don’t know where to start.
I would appreciate if someone could point me in the right direction.
My initial guess is that either the two fields can be combined into one where the listener code for the autocomplete function recognizes the field and it also gets posted when the form is submitted, or alternatively, the form field is hidden and the value is updated once a value is selected in the autocomplete field.
The autocomplete function has code in several places and I still have not wrapped my head around how it all works, but I’ve included the quickentry.js code which might be relevant, and the source of the 2 fields in the _quickentryform.html.erb partial.

      <div class="field">
        <%= form.label :PayTo %>
        <%= form.text_field :PayTo %>
      </div>

  <input type="search" placeholder="Enter payto..." data-behavior="autocomplete">

This is the code from quickentry.js

/*
Here, jQuery is telling the browser to: (1) wait until turbolinks finishes loading, (2) apply the easyAutocomplete method to all inputs where the data-behavior attribute equals autocomplete, (3) and pass it the data stored in the options variable.
*/

document.addEventListener("turbolinks:load", function() {
  
  //console.log("Listener called");
  $input = $('*[data-behavior="autocomplete"]')

  var options = {
    url: function(phrase) {
      return "/quickentry/search.json?q=" + phrase;
    },
    getValue: "payto",
  };

  $input.easyAutocomplete(options);

});

5/30 - Adding some of the generated source code as an example - I trimmed out some fields to keep it shorter. The 2 relevant fields are PayTo and the following autocomplete field.

Thanks again.

<!DOCTYPE html>
<html>
  <head>
    <title>Account Reconciliation</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="uVmeTTbYqtuD8grruvnPgRTujDk9waoXuFfKZXSh2002JyT827AeTobcK82w3IADilRTtHNYjbxbf_8X_CVxDw" />
    

    <link rel="stylesheet" media="all" href="/assets/application.debug-f674dfbf9ba642b5bd0b7af42a29530b1811c4c9e5bb0ca12863bee4b4af3819.css" data-turbolinks-track="reload" />
    <script src="/packs/js/application-a77022edd8841e243842.js" data-turbolinks-track="reload"></script>
  </head>

  <body>
    <h1>Quick transaction entry form</h1>

<form action="/transactions" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="sRdVtu6qR1CfBqnIEAGccccS8Pvt1N8n5taGMGG8rtNZupv82CFfCOXYF1hIQoXiRyj35uGYEsh0ujkGM6_PZw" autocomplete="off" />

  <div class="field">
    <label for="transaction_AcctNum">Acctnum</label>
    <input type="number" name="transaction[AcctNum]" id="transaction_AcctNum" />
  </div>

  <div class="field">
    <label for="transaction_Amount">Amount</label>
    <input type="text" name="transaction[Amount]" id="transaction_Amount" />
  </div>

  <div class="field">
    <label for="transaction_PayTo">Payto</label>
    <input type="text" name="transaction[PayTo]" id="transaction_PayTo" />
  </div>

  <input type="search" placeholder="Enter name..." data-behavior="autocomplete">

  <div class="field">
    <label for="transaction_Description">Description</label>
    <input type="text" name="transaction[Description]" id="transaction_Description" />
  </div>
  <div class="field">
    <label for="transaction_Notes">Notes</label>
    <input type="text" name="transaction[Notes]" id="transaction_Notes" />
  </div>


  <div class="actions">
    <input type="submit" name="commit" value="Create Transaction" data-disable-with="Create Transaction" />
  </div>
</form>

<a href="/transactions">Back</a>

  <script async nonce="" type="text/javascript" id="mini-profiler" src="/mini-profiler-resources/includes.js?v=35a79b300ab5afa978cb59af0b05e059" data-css-url="/mini-profiler-resources/includes.css?v=35a79b300ab5afa978cb59af0b05e059" data-version="35a79b300ab5afa978cb59af0b05e059" data-path="/mini-profiler-resources/" data-current-id="s6b24c933wlluqdver61" data-ids="s6b24c933wlluqdver61" data-horizontal-position="left" data-vertical-position="top" data-trivial="false" data-children="false" data-max-traces="20" data-controls="false" data-total-sql-count="false" data-authorized="true" data-toggle-shortcut="alt+p" data-start-hidden="false" data-collapse-results="true" data-html-container="body" data-hidden-custom-fields="" data-turbo-permanent="false"></script>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

墨落成白 2025-02-09 14:44:08

谢谢，Twisty-您的建议使我得出了答案。

我使用了正在存储的原始payto字段，并查找了如何添加其他属性，在这种情况下，由于jQuery代码似乎正在寻找特定的data-behaviour属性，将其添加到原始字段中可以做到这一点。
再次感谢您的帮助。非常感谢。

  <div class="field">
    <%= form.label :PayTo %>
    <%= form.search_field :PayTo, placeholder: "Enter name...", "data-behavior": "autocomplete" %>
  </div>

Thank you, Twisty - your suggestion led me to the answer.

I used the original payto field that was being stored, and looked up how to add other attributes, in this case since the jQuery code seemed to be looking for a specific data-behaviour attribute, adding that to the original field did the trick.
Thanks again for your help. Much appreciated.

  <div class="field">
    <%= form.label :PayTo %>
    <%= form.search_field :PayTo, placeholder: "Enter name...", "data-behavior": "autocomplete" %>
  </div>

回复收藏 0 原文

~没有更多了~