javascript - 无法自动完成以在第一次按键上工作

我设法使搜索栏接受API调用的参数。我唯一的问题是搜索栏在第一次按键时不起作用。它将在第二个按键上工作。我查看了this答案，该答案告诉我尝试删除onkeyup，但这对我没有用。

这是我的HTML

<html>
<div class="card-header">Search</div>
<div class="card-body">
    <div class="autocomplete">
        <input id="searchBar" class="form-control mdb-autocomplete" type="text" placeholder="Enter Name" onkeyup="nameSearch()">
    </div>
</div>

还有我的Javascript

<script>
function nameSearch(){

var name = $('#searchBar')[0].value;

$("#searchBar").autocomplete({
    delay:100,
    source: function(request ,response){
        $.ajax({
            type: 'GET',
            url: APIURL,
            datatype: 'json',
            data: {
                term : request.term,
                'symbol':name
            },
            success: function(list){
                if(list.length !== 0)
                    response(list);
                else{
                    alert("Name does not exist");
                }
            }
        });
    },
});
}
</script>

最佳答案

如链接文章中所述，在密钥处理程序中执行所有操作为时已晚。这不是自动完成设计的方式。考虑以下。

$(function() {
  $("#searchBar").autocomplete({
    delay: 100,
    source: function(request, response) {
      $.ajax({
        type: 'GET',
        url: APIURL,
        datatype: 'json',
        data: {
          term: request.term,
          symbol: request.term
        },
        success: function(list) {
          if (list.length !== 0)
            response(list);
          else {
            alert("Name does not exist");
          }
        }
      });
    },
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="card-header">Search</div>
<div class="card-body">
  <div class="autocomplete">
    <input id="searchBar" class="form-control mdb-autocomplete" type="text" placeholder="Enter Name">
  </div>
</div>

页面准备就绪时，这将初始化自动完成功能。当用户输入击键时，它将被运行，默认的最小长度为1。请记住，如果这是一个较大的记录集，则可能要提醒用户正在搜索，或将最小长度调整为3之类的内容。

用户在执行搜索之前必须键入的最少字符数。零对于仅包含少量项目的本地数据很有用，但是当单个字符搜索可以匹配数千个项目时，应使用更高的值。

希望能有所帮助。

关于javascript - 无法自动完成以在第一次按键上工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57872885/