jQuery autocomplete results box not displaying for JSON stream converted to `label` & `value`

Question

I had jQuery autocomplete working with the autocomplete search results box showing at the appropriate location. That was for server side search support with the following client side js:

$("#someSearchTermInputBox").autocomplete(
{
    minLength: 2,
    source: "/searchThatReturnsStringListOfResults"
});

In this case, the server sends back to the client the following information (the following via Chrome debugger):

["Alice","Bob","Calvin","Dirk","Elvin","Fancy","Greg","Harry","Issey","Jack"]

The corresponding input text box is:

<input id="someSearchTermInputBox" name="someSearchTermInputBox"  placeholder="Search for people, events and places" type="search"

Because I need more functionality, I changed my search to return a JSON that looks like this:

[{"firstname":"Alice","lastname":"Anonymous","dateOfBirth":"1980-01-01","phone":"001-100-200-3001","email":"alice.anonymous@gmail.com"},{"firstname":"Bob","lastname":"Anonymous","dateOfBirth":"1987-02-07","phone":"001-100-200-3002","email":"bob.anonymous@gmail.com"},{"firstname":"Calvin","lastname":"Anonymous","dateOfBirth":"1984-02-09","phone":"001-100-200-3003","email":"calvin.anonymous@gmail.com"},{"firstname":"Dirk","lastname":"Anonymous","dateOfBirth":"1982-05-01","phone":"001-100-200-3004","email":"dirk.anonymous@gmail.com"},{"firstname":"Elvin","lastname":"Anonymous","dateOfBirth":"1980-07-05","phone":"001-100-200-3005","email":"elvin.anonymous@gmail.com"},{"firstname":"Fancy","lastname":"Anonymous","dateOfBirth":"1990-02-01","phone":"001-100-200-3006","email":"fancy.anonymous@gmail.com"},{"firstname":"Greg","lastname":"Anonymous","dateOfBirth":"1984-01-09","phone":"001-100-200-3007","email":"greg.anonymous@gmail.com"},{"firstname":"Harry","lastname":"Anonymous","dateOfBirth":"1989-11-10","phone":"001-100-200-3008","email":"harry.anonymous@gmail.com"},{"firstname":"Issey","lastname":"Anonymous","dateOfBirth":"1950-01-01","phone":"001-100-200-3009","email":"issey.anonymous@gmail.com"},{"firstname":"Jack","lastname":"Anonymous","dateOfBirth":"1970-10-01","phone":"001-100-200-3010","email":"jack.anonymous@gmail.com"}]

And to split the results to be jQuery autocomplete compatible, I changed my client side js to this to map the incoming JSON to label and value or id (tried both id and label):

$("someSearchTermInputBox").autocomplete(
    {
    minLength: 2,
    source: function (request, response)
    {
    $.ajax(
    {
        url: "/searchThatReturnsJSON",
        data: {term: request.term},
        dataType: "json",
        success: function (data)
        {
        // alert (JSON.stringify (data)); <-- shows up correctly
        // console.log (data);
        response ($.map(data, function (item)
             {
                 console.log (item.firstname);
                 return
                 { id: item.firstname; value: item.lastname };
             }));
        }
    });
},
});

My header is as follows (unchanged from the previous working version):

<script src="/js/jquery-ui-1.10.4/js/jquery-1.10.2.js" > </script>
<script src="/js/jquery-ui-1.10.4/js/jquery-ui-1.10.4.min.js" > </script>
<link rel="stylesheet" type="text/css" href="/js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css" /> 

and now, my autocomplete box does not show up (it is not empty--it does not show up at all(I can see the Ajax interaction happening with the server on the debugger and on the server)). I am doing this in Chrome, so I fired up the debugger and I see the JSON correctly returned from the server. What HTML/CSS magic do I need to make sure my search results show up?

Where can I find the documentation on jQuery's web site (the jQuery autocomplete main website--the documentation does not talk about label or value, and certainly doesn't talk about the correct div elements to manipulate).

BTW, for the correct way to return a tuple into the response in the map call, is the delimiter a comma or a semicolon? Chrome gives me an error Uncaught SyntaxError: Unexpected token : which only went away when I changed the delimiter in the tuple returned to a semicolon.

Answer 1

Wow. I am just open mouthed in awe of the incredible syntax of JS. Anyway, the key issue was the use of the return statement {..} brackets. For a JS noob like me, this was countless hours down the drain trying to grasp any logic behind JS syntax and the use of K&R style brackets in a return statement (which I loathe as I am an Allman brackets guy).

Anyway, the code that got it to work finally was

$(document).ready (function ()
{
    $("someSearchTermInputBox").autocomplete(
    {
    minLength: 2,
    source: function (request, response)
    {
    $.ajax(
    {
        url: "/search",
        data: {term: request.term},
        dataType: "json",
        success: function (jsonDataReceivedFromServer)
        {
        //alert (JSON.stringify (jsonDataReceivedFromServer));
        // console.log (jsonDataReceivedFromServer);
        response ($.map(jsonDataReceivedFromServer, function (item)
            {
            console.log (item.firstname);
                            // NOTE: BRACKET START IN THE SAME LINE AS RETURN IN 
                            //       THE FOLLOWING LINE
            return {
                id: item.firstname, value: item.lastname };
            }));
        }
      });
     },
   });
});

Anyway, for folks who are Allman-indenters, I suggest using the following syntax which is Allman indentation friendly:

var someTuple = 
  {
      value: item.firstname,
      id:    item.lastname
  };
return someTuple;

A special shout out to the SO posts here and here. And a better post on the matter and curated (?) opinions here.

I hope this helps someone because I expect more people to run into this issue.