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

问题描述

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

这是代码：

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

第一次尝试后没问题

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

标签： javascripthtmlhtml-datalist

感谢这篇文章，我发现只有电子邮件输入类型有效，我必须使用 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();

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

问题描述

解决方案

推荐阅读