Question

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

我有一个目前看起来像这样的表单字段：

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

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

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

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

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

Answer 1

我能想到的唯一不涉及JavaScript的解决方案是datalist。这是一个很棒的新HTML5元素，可以完全满足您的需求，但它的浏览器支持isn't great。

如果您希望避免使用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

Pure vanilla javascript解决方案与支持javascript的每个框架兼容

在这种方法中，一个文本框被监听密钥，每次事件发生时输入文本与预定义的输入集匹配，如果找到，则作为li元素添加到底层UL标签
这里的css for li取自Chrome文本框中呈现的内容，可以根据自己的喜好自定义
关于从数据库部分中获取值或标记也不是问题，您可以使用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>

OR

支持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 我忘了更改关于导航的文本框更改将很快添加

具有特定条款的自动填写表单

2 个答案:

编辑1