La lista desplegable de autocompletar de la interfaz de usuario de jquery no aparece

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]

Código HTML

<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

});

Script PHP

        $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"}]

Cualquier ayuda sería muy apreciada
Muchas Gracias
Chris

preguntado el 27 de agosto de 11 a las 23:08

2 Respuestas

$.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.

En tu caso, miradas 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.

Respondido 28 ago 11, 04:08

I'm curious about the format of strings sent from a server to the Autocomplete widget. The jQuery Autocomplete documentation says, "When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP)." So I have used JSON. You clearly know this code. Is JSON not necessary for a remote server feeding Autocomplete? Is that a change and the documentation is incorrect? What's the deal? - Mike_Laird

Yes, a remote server must return JSON-formatted data for the plugin to consume. Supplying a string simply lets the widget know to use AJAX to retrieve the JSON data via the supplied URL. - Andrew Whitaker

Thanks, Andrew. I don't understand this supplying a string to get an ajax retrieve of JSON. But your comment confirms I should be generating JSON in the php and using data: JSON; in Autocomplete to get it. Thanks. - Mike_Laird

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
}

a

return item.source

Respondido 28 ago 11, 04:08

Willam: I got the following error... "missing ; before statement tobagoborn.com/javascript/jquery-ui/js/jquery-1.5.1.min.js Line 16".... Which prompted to use goggle's jquery CDN.... I added back the {}'s and changed item.term to item.value and now it works!! Thanks for the assist!!! - ChrisJ

oh yeah...should be item.source... Glad you figured it out at the end. - William Niu

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.