Question posted in
You can find the official documentation here.

easyAutocomplete function stops my keyup handler – Jquery ajax

I’m writing a code to autocomplete the city search on my site. The problem is that the ajax function, once called, blocks subsequent calls to the keyup event. In practice, as soon as three characters are reached in the input, the ajax call takes the data from the API I am using (all fine in this point) but then something happens, and the keyup event is not callable again (my console.log is not fired).

this is my HTML code:

<input type="text" id="prova" class="form-control search-slt" placeholder="Enter name1..." data-behavior="autocomplete" />

this is my JS code:

$(function () {
    var minlength = 3;
        $('#prova').keyup(function (e) {
          var that = this,
          value = $(this).val();
          console.log("keyup");
      if (value.length >= minlength ) {
        searchRequest = $.ajax({
          type: "GET",
          url: "https://nominatim.openstreetmap.org/search?q=" + $("#prova").val() + "&format=json",
          //async: false,
          success: function(results) {

            console.log(results);
            var aList = results;
            var aOptions = [];

            for (i = 0; i < aList.length; i++) {
              //optKey = aList[i].geometry.coordinates[0] + ',' + aList[i].geometry.coordinates[1];
              optLabel = aList[i].display_name;
              aOptions.push(optLabel);
            }

            var options = {
              data: aOptions
            };
            console.log(options);
            $("#prova").easyAutocomplete(options);
          }
    });
  }
});

});

I debugged the code and I realized that the easyAutocomplete function is the one that blocks subsequent keyup calls. Something happens that I don’t understand. easyAutocomplete is a Rails gem but it is nothing more than a wrapper for the jQuery’s easyAutocomplete plugin. Can you tell me what happens when I pass my options array to the easyAutocomplete function?

Tags:

2

Answers


  1. 0

    You may be missing the libraries. I got it working with your JavaScript:
    I made a folder called lookup. In the folder I made two files:

    1. test.html
    2. lookup.js
    3. Downloaded and unzipped the code for EasyAutocomplete-1.3.5 in the folder from http://easyautocomplete.com/files/EasyAutocomplete-1.3.5.zip

    test.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lookup</title>
    <link rel="stylesheet" href="EasyAutocomplete-1.3.5/easy-autocomplete.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="prova" class="form-control search-slt" placeholder="Enter name1..." data-behavior="autocomplete" />
<script src="EasyAutocomplete-1.3.5/jquery.easy-autocomplete.min.js"></script>
<script src="lookup.js" defer></script>
</body>
</html>

    lookup.js

    $(function () {
    var minlength = 3;
    $('#prova').keyup(function (e) {
        var that = this,
            value = $(this).val();
        console.log("keyup");
        if (value.length >= minlength) {
            searchRequest = $.ajax({
                type: "GET",
                url: "https://nominatim.openstreetmap.org/search?q=" + $("#prova").val() + "&format=json",
                //async: false,
                success: function (results) {

                    console.log(results);
                    var aList = results;
                    var aOptions = [];

                    for (i = 0; i < aList.length; i++) {
                        //optKey = aList[i].geometry.coordinates[0] + ',' + aList[i].geometry.coordinates[1];
                        optLabel = aList[i].display_name;
                        aOptions.push(optLabel);
                    }

                    var options = {
                        data: aOptions
                    };
                    console.log(options);
                    $("#prova").easyAutocomplete(options);
                }
            });
        }
    });
});

    That’s it. Should work fine. Hope this helped you.

    enter image description here

    Login or Signup to reply.
  2. 0

    OK. Try this. Change the lookup.js to be just the following:

    let options = {
    minCharNumber: 3,
    url: function (phrase) {
        return "https://nominatim.openstreetmap.org/search?q=" + $("#prova").val() + "&format=json";
    },

    getValue: "display_name",
    list: {
        match: {
            enabled: true
        }
    }
};

$("#prova").easyAutocomplete(options);

    Now should work the way you want. Please click on the up arrows to the answers if they helped you. That helps my ranking. Also, If it fixed it for you please click on the "This fixed my issue".
    Thanks,
    Jeremy

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search