带有特定条款的自动填写表格

Question

我正在使用使用 Phoenix 框架（用 Elixir 编写）开发的 Web 应用程序。

我有一个当前看起来像这样的表单域：

<div class="form-group">
  <%= select f, :category_id, @categories, class: "form-control" %>
  <%= error_tag f, :category_id %>
</div>

这允许用户从下拉列表中选择一个类别（没关系）；但是，我希望用户看到的是一个标准文本字段，当他们开始输入时，它将自动完成输入的字符串以及我的数据库中的类别。

与我们在 Stack Overflow 上发布问题时使用的标签字段非常相似。

使用 Phoenix 应用程序执行此操作的最佳方法是什么？我试过使用 jQuery 自动完成；但是，我想要一个更“轻量级”的解决方案（不需要 jQuery）。

非常感谢任何想法。感谢您的宝贵时间。

Answer 1

我能想到的唯一不涉及 JavaScript 的解决方案是 datalist。这是一个很棒的新 HTML5 元素，可以完全满足您的需求，但它的浏览器支持 isn't great（2021 年更新：现在支持要好得多）。

如果您想避免使用 JQuery，但仍然可以使用其他一些 JS 小部件，您应该看看Awesomplete - “一个超轻量级、可定制、简单的零依赖自动完成小部件”。如果你包括最小的 JS 和 CSS 文件，它们加起来只有大约 8kb。它也非常容易实现：

<input class="awesomplete"
       data-list="category1, category2, category3, category4, category5" />

它甚至可以附加到您当前的选择框（不过您必须隐藏它）：

<style>
  #mylist { display: none; }
</style>

<div class="form-group">
  <input class="awesomplete" list="mylist" />
  <%= select f, :category_id, @categories, class: "form-control", id: "mylist" %>
  <%= error_tag f, :category_id %>
</div>

当然不要忘记在脑海中添加JS和CSS文件：

<link rel="stylesheet" href="awesomplete.css" />
<script src="awesomplete.min.js" async></script>

Answer 2

与所有支持 javascript 的框架兼容的纯原生 javascript 解决方案

1. 在这种方法中，文本框会监听 keyup，每次事件发生时，输入文本都会与预定义的输入集相匹配，如果找到，则作为 li 元素添加到基础 UL 标记
2. 这里的 css for li 取自 chrome for text box 上呈现的内容，可以根据自己的喜好进行自定义
3. 关于从数据库部分中获取值或标签也不是问题，您可以使用 ajax 通过将输入作为参数传递到服务器端并返回匹配的标签并附加它来获取值

    // variables
    var input = document.querySelector('input');
    var people = ['john doe', 'maria', 'paul', 'george', 'jimmy','Andrew','Hendrie'];
    var results;
    
    // functions
    function autocomplete(val) {
      var people_return = [];
    
      for (i = 0; i < people.length; i++) {
        if (val === people[i].slice(0, val.length)) {
          people_return.push(people[i]);
        }
      }
    
      return people_return;
    }
    
    // events
    input.onkeyup = function(e) {
      input_val = this.value; // updates the variable on each ocurrence
    
      if (input_val.length > 0) {
        var people_to_show = [];
    
        autocomplete_results = document.getElementById("autocomplete-results");
        autocomplete_results.innerHTML = '';
        people_to_show = autocomplete(input_val);
        
        for (i = 0; i < people_to_show.length; i++) {
          autocomplete_results.innerHTML += '<li>' + people_to_show[i] + '</li>';
    
        }
        autocomplete_results.style.display = 'block';
      } else {
        people_to_show = [];
        autocomplete_results.innerHTML = '';
      }
    }

ul{
padding:0;
margin:0;  
}
li{
  max-width:169px;

      padding: 1px 0px;
list-style:none;
      -webkit-appearance: textfield;
    background-color: white;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial
          text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;

    text-align: start;
    margin: 0em 0em 0em 0em;
    font: 13.3333px Arial;
}

<div id="autocomplete-container">  
  <input type="text" autofocus="true" name="autofocus sample" placeholder="search people" id="autocomplete-input"/>
  <ul id="autocomplete-results">
  </ul>
</div>

或

支持 html5 的浏览器最简单的解决方案是数据列表

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

http://www.w3schools.com/tags/tag_datalist.asp

编辑 1

With Added Navigation 我忘了更改关于导航的文本框更改将很快添加它