Set jquery array for CatComplete

Question

I have a working example of JQuery CatComplete, however I am having difficulty getting the example to work with an AJAX variable. Unable to find examples of CatComplete with $ajax request, versus Autocomplete examples which are plentiful.

Below is the data the example uses, which works, but I want to set data to the result of an AJAX request.

 var data = [
                { "label": "Test1, "category": "Artist" },
                { "label": "Test2", "category": "Artist" },
                { "label": "Test3", "category": "Musician" }
            ];

Desired data set:

   var data = $.ajax({
                    url: "/People/AutoComplete",
                    type: 'POST',
                    dataType: 'json',
                    data: { Prefix: $("#search").val() },
                    success: function (data) {
                        data= JSON.stringify(data);
                           alert(data);
                    }

When using the second approach, the initial page load has no data -- then the function seems to fire again and has data but the autocomplete does not work. I have checked that the resulting object matches the same structure as the explicit var data =.

Ultimately, the attempt is to use the following example, but with AJAX request for datasource: https://jqueryui.com/autocomplete/#categories

Possible duplicate of [jQuery autocomplete with callback ajax json](https://stackoverflow.com/questions/9656523/jquery-autocomplete-with-callback-ajax-json) — wp78de, Jul 07 '18 at 07:11
As you've noted, Autocomplete samples are plentiful. However this question pertains to CatComplete, which examples using $ajax are scarce. — Turtliedoe, Jul 07 '18 at 07:25
Is the CatComplete not just another usage example of the very same autocomplete functionality? — wp78de, Jul 08 '18 at 16:04

score 0 · Answer 1 · answered Jul 07 '18 at 07:49

Basically you have two problems.

One is an unfortunated clash of variable and parameter names. Both called data.

The other is that by the time you initialize your autocomplete widget with source:data I assume, your data variable has not been initialized yet.

So you need to set the source of the autocomplete to the data returned by ajax when the data is returned, not before.

$.ajax    ({
  url: "/People/AutoComplete",
  type: 'POST',
  dataType: 'json',
  data: {
    Prefix: $("#search").val()
  },
  success: function (jsondata) {
    $( "#selector" ).autocomplete( "option", "source", JSON.stringify(jsondata));
  }

Raihan Ridoy · Answer 2 · 2018-07-07T08:23:10.060

try that

<script>
$("#search").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/People/AutoComplete",
            type: 'POST',
            dataType: 'json',
            data: { text: request.term },
            success: function (jsondata) {
                response($.map(data, function (people) {
                    return { lable: people.name, value: people.name } // or the property you want so show at auto complete
                }));
            }
        });
    }
});

Hope it will work for you

score 0 · Answer 3 · answered Jul 07 '18 at 08:17

Can you try this:

$( "#search" ).catcomplete({
  delay: 500,
  source: function(request, response) {
    $.ajax({
      url: "/People/AutoComplete",
      type: "POST",
      dataType: "json",
      contentType: "application/json",
      data: { Prefix: request.term },
      success: function (data) {
        console.log(data);
        response(data);
      },
      error: function(error){
        console.log(error);
        response([{ "label": "Test0", "category": "BadCoder" }]);
      }
    });
  }
});

Note that the source property can be

an object (local),
a string (URL for GET request); Ex: "/People/AutoComplete?Prefix="+$("#search").val()
a function(request, response); request- search object, response- a callback with source data.

Set jquery array for CatComplete

3 Answers3