Question 11059 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

autcomplete jquery-ui , parameter doesn't recognized as string

my parameter in autocomplete function isn’t recognized in jquery-ui when i do a console.log, i see an autocomplete-url and [Object object] after
that’s my code :
`import algoliasearch from ‘algoliasearch/lite’;
import { autocomplete, getAlgoliaResults } from ‘@algolia/autocomplete-js’;

const searchClient = algoliasearch(
‘latency’,
‘6be0576ff61c053d5f9a3225e2a90f76’
);
$(document).ready(function() {

$("#search").each(function () {
    var autocompleteUrl = $(this).attr('autocomplete-url');
    console.log('autocomplete vaut ' + autocompleteUrl);
    $("#search").autocomplete({hint: false}, {
            source: function(query,cb){
                $.ajax({
                    url: autocompleteUrl
                }).then(function (data) {
                    console.log(data);
                });
                console.log(autocompleteUrl+query);
            },
        },
    )
});

});

and my screenshot:
enter image description here

`

i try have my response of my request .

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    the code just display the result in the console, not under the input search bar.It's not query but query.term , we can know it when we dsiplay the object query.

        $(document).ready(function() {

    $("#search").each(function () {
        var autocompleteUrl = $(this).attr('autocomplete-url');
        console.log('autocomplete vaut ' + autocompleteUrl);
        $("#search").autocomplete({hint: false}, {
            source: function(query) {
                console.log(query.term);
                $.ajax({
                    type: "GET",
                    url: autocompleteUrl + query.term}).then(function(data){
                        console.log(data[0].nom);
                })},
            select: function (event, ui){
                 event.preventDefault();
                 console.log(ui)
                 $(event.target).val(ui);
                 $('#search').html(ui);
             },
            delay: 500,
            minLength: 2,

        });
    });
})

  2. 0

    The jQuery UI Autocomplete documentation specifies that the source value, when a function, will be called with two arguments: request and response. request is an object that contains the term, as you have identified. response is a callback that will be called with the array of values you want to have appear in the dropdown.

    Assuming our API response is an array of objects, each contains a nom property, we will need to map that into an array of strings (or, optionally, an array of objects with label and value properties) and invoke the response callback, passing it the mapped values.

    $("#search").autocomplete({ hint: false }, {
  source: function(request, response) {
    console.log(request.term);
    $.ajax({
      type: "GET",
      url: autocompleteUrl + request.term
    })
      .then(function(data) {
        console.log(data[0].nom);
        response(data.map(item => item.nom));
      });
  },
  delay: 500,
  minLength: 2
});
    Login or Signup to reply.
  3. 0

    my response is brut data , this is the image
    enter image description here

    Login or Signup to reply.
  4. 0

    so , i resume for the viewers:

    • you have to add the jquery-ui.css
      -remove the appendTo attribute
    • use response method to return results.
      And is not necessary to use JSON data .In this case the api return brut data
      so , the code is :

    $(document).ready(function() {

    $("#search").each(function () {
    var autocompleteUrl = $(this).attr('autocomplete-url');
    console.log('autocomplete vaut ' + autocompleteUrl);
    $("#search").autocomplete({hint: false}, {
        source: function (query, response) {
                let donnees ;
            /*  $.getJSON(
                  autocompleteUrl + query.term,
                  function (data) {
                      response(data);
                  });*/
            console.log(query.term);
            $.ajax({
                type: "GET",
                cache: false,
                url: autocompleteUrl + query.term + '&fields=departement&boost=population&limit=5' }).then(function (result) {
                noms=JSON.stringify(result);

                    response($.map(result, function(item){
                        console.log(item.nom);
                        return item.nom ;

                    }),
                    );
                });
        },

          select: function (event, ui){
               event.preventDefault();
              console.log(ui);
               $(event.target).val(ui.item.value);
                return false ;
           },
          focus:function( event, ui ) {
            console.log(ui);
          $( "#search" ).val( ui.item.value);
          return false;
      },
        delay: 500,
        minLength: 2,
    });
})

    })

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

Back To Top
Search