javascript - 带有用户输入文本字段和多项选择的下拉菜单

Question

我正在寻找一个带有用户输入的下拉菜单，但我希望用户能够添加多个选项。

我试图用这个来做一个数据列表，但是当需要多个输入时，我读到那个数据列表只能用电子邮件和文件来做。

这是我当前代码的示例：

HTML：

<input type="text" name="users" id="users" list="allowedUsers">
<datalist id="editUsers">
    <option value="bob"></option>
</datalist>

JS：

$('#users').keypress(function(event){
    var keyCode = (event.keyCode ? event.keyCode : event.which)
    if(keyCode == '13') {
        var inputVal = $(this).val();
        $(#editUsers).append('<option value="'+inputVal+'">'+inputVal+'</option>')
    }
});

然后，用户可以点击一个值，如果他们点击另一个值，要么添加那个值，要么当他们使用逗号时，他们可以点击添加。不知道什么是最简单的。

谢谢！

标签： javascripthtml

Answer 1

检查这个：https ://selectize.github.io/selectize.js/

在中期，也许你可以摆脱这样的事情：

1个例子：

它通过单击项目来工作，输入是只读的......

$('#users').focus(function(){
$('#editUsers').show();
});

$('#editUsers').change(function() {
    var val = $("#editUsers option:selected").text();
    var inpoutVal = $('#users').val();
    if (inpoutVal!=="")   {
 $('#users').val(inpoutVal+","+val)
  }else{
   $('#users').val(val)
  }    
});

#editUsers {
  display: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="users" id="users" readonly>
  <select id="editUsers" multiple>
    <option>Bob</option>
    <option>Jhon</option>
    <option>Yoda</option>
  </select>

第二个例子： 这只是我真正准备的东西，但它失控了，无论如何尝试压一些像 B 或 Y 这样的起始字母，然后添加 cooma ,。无论如何，它并没有按预期工作，但也许有人会从这次失败的尝试中得到启发。;)

来晚了，不能再继续工作了……

$('#users').focus(function() {
  $('#editUsers').show();
});

$("#users").bind('input', function() {
  console.clear();
  var inputVal = $("#users").val();
  var inputVal2 = inputVal.split(",");
  var last = inputVal2[inputVal2.length - 1];
  $('#editUsers option').each(function() {
    var selVal = $(this).val();
    if (selVal.indexOf(last) > -1 && inputVal.indexOf(",") <= 0) {
      $("#users").val(selVal + ",")
    } else if (selVal.indexOf(last) > -1 && inputVal.indexOf(",") > -1) {
      var newval = $("#users").val();
      var newval2 = newval.split(",");
      newval2.pop()
      newval2
      $("#users").val(newval2 + "," + selVal)
    }
  });
});

#editUsers {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="users" id="users">
<select id="editUsers" multiple>
  <option>Bob</option>
  <option>Jhon</option>
  <option>Yoda</option>
</select>