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( ui.item ?
            "Selected: " + ui.item.value + " aka " + ui.item.id :
            "Nothing selected, input was " + this.value );
    }
});

So as I see there is no options how to make ajax request with post data to the "search.php".

But I need to do that to send some filter from previous input field (current field: city, previous field: country).

How to do that?

Thanks!

Skylab

Answer 1

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

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

Luckett

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);
?>

Semiskilled

Answer 3

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
            });
        }});

Pandect

Answer 4

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

Aronow

Answer 5

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 );
    }
});

Disagree

There is no such option or method as type in Autocomplete API: api.jqueryui.com/autocomplete – Lampblack