如果数据列表已包含以前的值，则不显示数据

Question

我创建了自定义自动完成，在这里我想使用手动输入输入，并从数据库中提供选项。所以我创建了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

感谢这篇文章，我发现只有电子邮件输入类型的作品，我必须添加多个值多个选择与数据

此外，只有逗号起作用，分号不能用作分隔符

<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();