Autocomplete with JSON data source not working

Autocomplete with JSON data source not working

Greetings experts:

I have some C# code that's generating some JSON by building up a string.  When I visit the page (http://myServer/index.aspx) from a client, the following is displayed:

[
{"label": "James Smith", "value": "12345"},
{"label": "Peter Smith", "value": "23456"},
{"label": "Sally Smith", "value": "34567"}
]

(t here are actually about 10 sets of labels/values, but they all follow this format) and examining it using Chrome's Developer Tools reports it as a series of objects.  I've put it through JSONLint and it's reported as valid JSON.

I have a test HTML page with an input text box, id="client" and the following javascript (thanks to the depths of the interweb!):

  2. $(function() {
  3. $("#client").autocomplete({
  4.    source: function (request, response) {
  5.         $.ajax({
  6.             url: "http://myServer/index.aspx",
  7.             type: "GET",
  8.             data: request,
  9.                      dataType: "JSON",
  10.                      minLength: 2,
  11.             success: function (data) {
  12.                 response($.map(data, function (el) {
  13.                     return {
  14.                         label: el.label,
  15.                         value: el.value
  16.                     };
  17.                 }));
  18.             }
  19.         });
  20.    },
  21.    select: function (event, ui) {
  22.        this.value = ui.item.label;
  23.        event.preventDefault();
  24.    }
  25. });
  26.   });
The problem I'm facing is that, when I enter anything into the input box (even something that isn't in the list of names or values), all names are presented for selection beneath the input box. As I continue typing, the list of suitable names doesn't shrink.

Before setting this up on a server with AJAX, I worked with list of data in the same format in the javascript and that worked perfectly both in terms of presenting only a subset of the names initially and the list reducing as I continued to type. The javascript was different to that I have at present.

This is so frustrating. Is it related to how we're generating the JSON or is it a problem in the javascript? My long-term goal is to pull a list of clients dynamically from a database so hard-coding the names into the javascript isn't an option.

I'm grateful for your time and suggestions.