Question

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="model">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

Answer 1

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