包含特定条款的自动填写表单

Autocomplete Form with Specific Terms

本文关键字：表单 包含特      更新时间：2023-09-26

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

我有一个表单字段，目前如下所示：

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

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

功能与我们在堆栈溢出上发布问题时使用的标签字段非常相似。

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

任何想法都非常感谢。谢谢你的时间。

我能想到的唯一不涉及JavaScript的解决方案是数据列表。这是一个很棒的新 HTML5 元素，可以完全满足您的需求，但它的浏览器支持不是很好（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>

纯原版 JavaScript 解决方案，与支持 JavaScript 的每个框架兼容

  1. 在这种方法中，监听一个文本框进行键控，每次事件发生时，输入文本都会与预定义的输入集匹配，如果找到，则作为 li 元素添加到底层 UL 标签中
  2. 在这里，li的css取自chrome上呈现的文本框，可以根据自己的喜好进行自定义
  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

添加导航我忘了更改有关导航的文本框更改将很快添加它

相关文章：