无法让自动完成在第一次按键时工作

Question

我设法让我的搜索栏接受我的 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>

Answer 1

正如链接 post 中提到的那样，在密钥处理程序中执行所有这些为时已晚。这不是自动完成的设计方式。考虑以下因素。

$(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.

的内容

The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.

查看更多：https://api.jqueryui.com/autocomplete/#option-minLength

无法让自动完成在第一次按键时工作

Can't get autocomplete to work on first keypress

javascript

jquery-ui