时间戳

首页 > 解决方案 > 使用 id、来自 sqlite 的数据和验证实现自动完成

javascript - 使用 id、来自 sqlite 的数据和验证实现自动完成

问题描述

我正在创建我的第一个基于 sinatra 的 Web 应用程序，将 materialize-stepper 用于我的表单，并为其余的前端使用 materialize。我有一个接受用户 2 个用户输入的表单，每个用户输入都有自动完成功能。自动完成的数据直接来自我的数据库。我正在尝试找到一种方法来添加一个功能，其中只能使用来自用户的输入，并且只有在输入来自建议自动完成数据时才能提交表单，并以某种方式添加一个 ID，以便我可以引用每个结果。

需要该 ID，因为该表单从我的数据库中获取机场的起点和目的地，并请求获取包含该信息的航班，如果传递的数据无效，我将无法获得结果。稍后我需要添加一个功能，如果用户想添加该航班，则他可以添加该航班，因此我需要使每个航班“可跟踪”

这是负责自动完成数据和初始化的代码

//   document.addEventListener('DOMContentLoaded', function() {
   // initialize stepper
const flightStepper = document.querySelector('.stepper');
const stepper = new MStepper(flightStepper);
// initialize the autocomplete
const elems = document.querySelectorAll('.autocomplete');
M.Autocomplete.init(elems, {
   limit: 8,
   data: {
      // pulling all the airports from the database
   <%@airport.all.map do |airport|%>
      <% if airport.iata_code.split('-')[0].size > 3%>
      // "beautifying the autocomplete text for the user and verifying its length"
         "<%= airport.name%> ,<%=airport.iata_code.split('-')[0].chop %>": null,
         <% else%>
         "<%= airport.name%> ,<%=airport.iata_code.split('-')[0] %>": null,
         <%end%>
    <%end%>
    }});
</script>

我的表格是基本表格，取始发机场、目的地等。

感谢任何试图帮助我的人！

标签： javascriptrubysinatramaterialize

解决方案

推荐阅读