Getting jQuery autocomplete to work with PHP source

Question

I have a jQuery autocomplete field with this code:

 var tags = ["a", "ab", "abc", "abcd", "adbce", "abcdef", "abcdefg", "abcdefgh", "abcdefghi", "abcdefghij", "abcdefghijk", "abcdefghijkl", "abcdefghijklm", "abcdefghijklmn", "abcdefghijklmno", "abcdefghijklmnop", "abcdefghijklmnopq", "abcdefghijklmnopqr", "abcdefghijklmnopqrs", "abcdefghijklmnopqrst", ];
      $("input#name").autocomplete({
        position: {
          offset: "0 -10px",
        },
        source: tags
      });

It worked correctly using the 'tags' array as sample input data.

Now I need to have a set of MySQL query results instead of that sample array. What I did was change the function call to this:

$("input#name").autocomplete({
        position: {
          offset: "0 -10px",
        },
        source: "http://absolutepathtofile/autosuggest.php"
      });

I used an absolute path to be sure I wasn't making some silly mistake there, because I can't get the file's return into the autocomplete. I've been to the jQuery documentation and found some examples of using PHP/MySQL to return results for the autocomplete but I can't get it to work.

This is what I tried in autosuggest.php:

$term = $_REQUEST['term'];
$query = "SELECT * FROM merchants WHERE business_name LIKE '%$term%'";
$result = mysql_query($query);

$k=0;
while($row=mysql_fetch_array($result)){

    $aUsers[$k]=$row['business_name'];
    $k++;

}

echo json_encode($aUsers);

I made it as simple as possible but it didn't work.

Then I tested to see if the JSON was being sent at all so I did this:

$array[0]="test";
$array[1]="test1";

echo json_encode($array);

And it doesn't work. I can't find this problem anywhere, what am I doing wrong? PHP version is 5.3.10 and it has json_encode (used it before).

Answer 1

$.ajax({
     url:"http://absolutepathtofile/autosuggest.php",
     type:"post",
     success:function(html){
         $("#user_phone").autocomplete(
            {position: {offset: "0 -10px"},
            source: html
         });
     }   
});

• work greate for me and tested

Answer 2

I wrote this custom script to get drop downs working in our code when we didnt have json_encode available, hopefully it helps you to work something out.

The 'get_xref_values()' function just builds an array from the parameters provided, and the GET - 'term' - is the text within your autocomplete text box, it gets added automatically by the control.

The 'click' code just makes the autocomplete drop-down automatically when a user clicks it, as well as when they type.

Here is the jquery:

$("#libraryEventAspectRatio" ).autocomplete({
    source: "/dropDowns/autoXref.php?category=" + "aspectratio",
    matchContains: true,
    minLength: 0
}).click(function(){
    $("#libraryEventAspectRatio" ).autocomplete('search', $(this).val());
});

and here is the php:

//this page creates simple data for a drop down box to use (jquery's UI autocomplete)

$category       = get_input_get("category");
$description    = get_input_get("term");
$select_field   = get_input_get("selectField");
$select_value   = get_input_get("selectValue");

$order_by       = "description";

$xref_data      = get_xref_values($category, $order_by, $description, $select_field, $select_value);

$str = "[";

foreach ($xref_data as $row):
    $str .= '"' . $row['description'] . '",';
endforeach;

//chop off the last comma
if (count($xref_data)) {
    $str = substr($str,0,-1);
}

$str .= "]";

echo $str;