CODEWITHSUNDEEP
javascriptjquery-ui
greatFritz
greatFritz

Reputation: 201

Can't get autocomplete to work on first keypress

I managed to get my search bar to accept a parameter for my API call. My only problem is that the search bar does not work on the first keypress. It will work on the second keypress. I have looked at this answer that told me to try and remove the onkeyup but that has not worked for me.

This is my 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>

And my 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>

Upvotes: 0

Views: 426

Answers (1)

Twisty
Twisty

Reputation: 30893

As was mentioned in the linked post, executing all that in the key handler is too late. That's not how Autocomplete was designed. Consider the following.

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

This initializes the Autocomplete when the page is ready. When the User enters a keystroke, then it is run, the default min length is 1. Remember if this is a larger record set, you may want to alert the user that a search is happening or adjust the min length to something like 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.

See More: https://api.jqueryui.com/autocomplete/#option-minLength

Upvotes: 1

Related Questions