datalist如果已包含先前值，则不显示数据

Question

我创建了自定义自动完成功能，我想使用手动输入条目并提供DB中的选项。 所以我创建了javascript代码，它从DB获取数据并将它们放入datalist中。 一切都适用于第一次搜索，但后来我实现了分隔符，所以我可以在输入字段中添加多个值（我希望有电子邮件列表）。 当我的代码再次为下一次自动完成调用ajax时，我在控制台中看到datalist中的数据已刷新，但浏览器不再向我显示任何数据。

这是代码：

   <input list="manual_emails" type="text" name="manual_email_entry" id="manual_email_entry" class="form-control" placeholder="zadaj email" />
 <datalist id="manual_emails">
  </datalist>

$('#manual_email_entry').on('input',function(e){

  $entry_term = $('#manual_email_entry').val();

  $search_term = $entry_term.split(/[; ]+/).pop();


  if ($search_term.length > 2) {
    $.ajax({
            type: "POST",
            url: "/find_email/",
            dataType: 'json',
            data: {request: $search_term}

          }).done(function (data) {
            //console.log(data.data)
            var $opt_val = ''
            for ( var i = 0; i < data.data.length; i++) {
              $opt_val += '<option value="'+data.data[i]+'">'
            }

            $('#manual_emails').html('')
            $('#manual_emails').html($opt_val)
          })
    ; 
  }
});

首次尝试后这是可以的

但是当我想再次搜索时，它没有显示任何内容，但在代码中我看到我的数据列表已刷新。

Answer 1

感谢这篇文章，我发现只有电子邮件输入类型可以工作，我必须使用datalist添加多个值多项选择

也只有逗号工作，而不是分号作为分隔符

<input list="manual_emails" type="email" name="manual_email_entry" id="manual_email_entry" class="form-control" placeholder="Zadaj email" multiple />
            <datalist id="manual_emails">
             </datalist>

$search_term = $entry_term.split(/[, ]+/).pop();