Question

I have tried so many things but I don’t understand this sooo confusing.

I have this

<input id="wba" type="search" name="q" value="" class="search box" />
<input type="submit" value="Go" class="search button" />

also
a php file

header('Cache-Control: no-cache, must-revalidate');
header('Content-type: application/json');

$arr = array('test'=>'hello world');

echo json_encode($arr);

as for javascript I have tried everything including the demos from the jquery website but no luck … someone out there help me setup the autocomplete to display the data?

EDIT

$(function() {
        function log(message) {
            $("<div/>").text(message).prependTo("#log");
            $("#log").attr("scrollTop", 0);
        }

        $("#wba").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "search.php",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function(data) {
                        response($.map(data.sites, function(item) {
                            alert(item);
                            window.console.debug(item);
                            return {

                                label: item.name ,
                                value: item.url
                            }
                        }))
                    }
                })
            },
            minLength: 2,
            select: function(event, ui) {
                log(ui.item ? ("Selected: " + ui.item.name) : "Nothing selected, input was " + this.value);
            },
            open: function() {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function() {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });
    });

This code is from the jqueryui website (demo) …

Answer 1

It should be something like this

// JS
$(function() {
  $("#wba").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "search.php",
        dataType: "jsonp",
        data: { q: request.term },
        success: function(data) {
          response($.map(data, function(value,key) {
            return { label:value.label , value: value.val }
          }));
        }
      });
    },
    minLength: 2
  });
});​

// PHP
$results = array(
   array('label' =>'label1', 'val' => 'value1'),
   array('label' =>'label2', 'val' => 'value2'),
   array('label' =>'label3', 'val' => 'value3')
);
// Optionally do something with the user input ($_GET["input_value"])
echo $_GET['callback'].'('.json_encode($result).');'​​​​​​​​​

i dont know why but this does work…