jQuery UI autocomplete: how to send post data?

Question

From jQuery UI site (veiw source):

$( \"#birds\" ).autocomplete({
    source: \"search.php\",
    minLength: 2,
    select: function( event, ui ) {
        log(          


        

Answer 1

I had this same need and no single example from stackoverflow was working properly.

By testing diffrent authors contributions and tweaking here and there the below example is most likely what anyone would be looking for in an autocomplete that

1. Send out POST request.

2. Does not require tweaking the main autocomplete UI.

3. Sends out multiple parameters for evaluation.

4. Retrieves data from a database PHP file.

All credit is to the many persons whom i used their sample answers to make this working sample.

        $( "#employee_name" ).autocomplete({
        source: function (request, response) {
        $.ajax({
        type: "POST",
        url:"employees.php",
        data: {term:request.term,my_variable2:"variable2_data"},
        success: response,
        dataType: 'json',
        minLength: 2,
        delay: 100
            });
        }});

Answer 2

$( "#birds" ).autocomplete({ 
source: function (request, response) {
    $.ajax({
  type: "POST",
  url:"search.php",
  data: request,
  success: response,
  dataType: 'json'
});
  }
}, {minLength: 3 });

//-------------------------
//search.php - example with request from DB

//


 $link = mysql_connect($mysql_server, $mysql_login, $mysql_password)
        or die("Could not connect: " . mysql_error());
     mysql_select_db($mysql_database) or die("Could not select database");
     mysql_set_charset('utf8'); 

$req = "SELECT mydata FROM $mysql_table WHERE mydata LIKE '".$_REQUEST['term']."%' ORDER BY mydata ASC";
$query = mysql_query($req);

while($row = mysql_fetch_array($query))
{
    $results[] = array('label' => $row['mydata']);
}


echo json_encode($results);
?>

Answer 3

Actually, you can do this more simple with type: "post":

$( "#birds" ).autocomplete({
    source: "search.php",
    type: "post"
    minLength: 2,
    select: function( event, ui ) {
        log( ui.item ?
            "Selected: " + ui.item.value + " aka " + ui.item.id :
            "Nothing selected, input was " + this.value );
    }
});

Answer 4

Try changing the source to be a method which uses $.post:

$("#birds").autocomplete({
  source: function (request, response) {
    $.post("search.php", request, response);
  },
  ...

Answer 5

The following worked well for me. I needed some custom data, so I pulled the search "term" term: request.term out of the request as follows:

  jQuery('.some-autocomplete').autocomplete({
    source: function(request, response) {
      jQuery.post(ajaxurl, {action: 'some_content_search', type: type, term: request.term}, response, 'json');
    },
    minLength: 2,
    ...