Question

I have created a web service that is basically a json set of values for a set of actions in my app. The idea is that it will return from a MongoDB Collection a set of key/values. So far the return value is somewhat like:

    {"d":"[{\"label\":\"Add A Customer\",\"value\":\"\/EdCustomer\/\"},{\"label\":\"View Suppliers\",\"value\":\"\/Suppliers\/\"},{\"label\":\"Add A Customer\",\"value\":\"\/EdCustomer\/\"}]"}

I have the following Javascript/JQuery to make this work with the Autocomplete that is part of JQuery UI:

   var commands;
   var commandstest = [
  {
     value: "test1",
     label: "test1"
  },
  {
    value: "test2",
    label: "test2"
  }
 ];
  $(document).ready(function () {
     //The search button
    $("#btnCmdSearch")
     .button()
     .click(function () {
        alert("You searched for " + txtSearch.value);
    });

$.ajax({
  url: "http://localhost:50305/SearchCommands.svc/GetCommands",
  dataFilter: function (data) {
    var msg = eval('(' + data + ')');

    if (msg.hasOwnProperty('d'))
      return msg.d;
    else
      return msg;
  },
  success: function (data) {
     commands = data;
  }
});

//The search Box AutoComplete...
$("#txtSearch").autocomplete({
  source:commands,
  minLength: 2,
});

});

What is interesting is that when i use the commandstest in the source of the autocomplete method it works as expected. If i use commands (the json array) then nothing happens. I looked in chrome and i get the error :

    Uncaught TypeError: Property 'source' of object #<Object> is not a function

If I change the declaration of var commands to:

   var commands = new Array();

Then this error message doesn’t appear but still nothing happens with the autocomplete. What on earth am I doing wrong?

Answer 1

i think source needs to be a call back function which returns a response

i.e.

$("#txtSearch").autocomplete({
  source: function(request, response){ response(commands); },
  minLength: 2,
});

reply if tats not working then im going to take a closer look at it.