jquery UI autocomplete drop-down list not showing up

I am using jquery UI autocomplete and for some reason I can't figure out why the drop-down list is not showing up. I've tried everything I can think of with no luck... I am hope some can help me. Firebug shows the correct JSON output from my PHP script.

The alert(data) under success shows: [object Object]

HTML code

<select name=key1 id=key1>
  <option selected value="">CHOOSE ONE </option>
  <option value="allrecs">ALL RECORDS <</option>
  <option value="citnumb">CIT NUMBER <<option>
  <option value="sernumb">SERIAL NUMBER </option>
  <option value="m开发者_如何转开发odel">MODEL </option>
</select>

<input type="text" size=30 name="qvalue" id="qvalue">

JQUERY script

$("#qvalue").autocomplete(  
{
  source: function(request, response) 
  {
    $.ajax(
    {
      url: "jqsuggest2.php",
      type: "POST",
      dataType: "json",
      data:{term: request.term,searchkey:$('#key1').val()
    },
    success: function(data) 
    {
      alert(data);
      response( $.map( data, function(item) 
      {
         return 
         {
            value: item.term
         }
       }));
                }
        });
  },
  minLength: 2

});

PHP script

        $json = '[';
        $first = true;

        while($row = mysql_fetch_array($result)) 
        {
            if (!$first)
            { 
                $json .=  ','; 
            }
            else
            {
                $first = false; 
            }

            if ($searchkey == "citnumb")
            {
                $json .= '{"value":"'.$row['citnum'].'"}';
            }
            if ($searchkey == "sernumb")
            {
                $json .= '{"value":"'.$row['sernum'].'"}';
            }
            elseif ($searchkey == "model")
            {
                $json .= '{"value":"'.$row['model'].'"}';
            }

        }
        $json .= ']';
        echo $json;
        }

Firebug output [{"value":"28225"}]

Any help would be greatly appreciated

Thanks

Chris

You need to have the an array to the source option. I believe if you change the return statement in your map function, you should be set to go. So, change

return 
{
    value: item.term
}

to

return item.source

$.map is used to transform one array into another array. In the context of the autocomplete widget, it is used to transform a source array into an array in the format that the autocomplete widget expects.

In your case, it looks like your php is returning an array with objects structured like this:

[{ "value": "1234"}, ... ]

Turns out this is a valid array for autocomplete to use. You shouldn't need any post processing. In other words, this should work for you:

$("#qvalue").autocomplete(  
{
  source: "jqsuggest2.php",
  minLength: 2
});

In fact, you could shorten your PHP to just return an array of strings:

["1234", "4567", "89101"]

Which is also a valid array for autocomplete to use.