Ajax search without "submit" button - php

Question

I have a search form:
<form action="search.php" method="post" name="form" id="form" onsubmit="return false;">
<input name="search" type="text" id="search">
<input name="name" type="text" id="name">
<select name="car" id="car">
<option value="audi">AUDI</option>
<option value=bmw">BMW</option>
<option value="mini">MINI</option>
</select>
<select name="year" id="year">
<option value="2000">2000</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select>
</form>
And search.php
<?php
$search = $_POST['search'];
$search = addslashes($search);
$search = htmlspecialchars($search);
$search = stripslashes($search);
$year = $_POST['option'];
$year = addslashes($year);
$year = htmlspecialchars($year);
$year = stripslashes($year);
if($search == '')
exit("Enter name");
elseif(!preg_match("/^[a-zа-я0-9]+$/ui", $search))
exit("Incorrectly");
include 'dbsetting.php';
$mysqli->set_charset("utf8");
$query = "SELECT * FROM cars WHERE (type LIKE '%".$search."%' OR name LIKE '%".$search."%' OR class LIKE '%".$search."%') AND year = '".$year."'";
Live search works. Using AJAX code:
$(function() {
$("#search").keyup(function(){
var search = $("#search").val();
$.ajax({
type: "POST",
url: "search.php",
data: {"search": search},
cache: false,
success: function(response){
$("#res").html(response);
}
});
return false;
});
});
input name="search" working correctly, but I can not add to search another select and more inputs. How to add to ajax code some inputs and select and how to save and add to search results in search.php?
I'm sorry for my English.

Answer 1

you can post your fields either name value pair format like:-
var search = $("#search").val();
var name = $("#name").val();
var car = $("#car").val();
var year = $("#year").val();
And user that query string while sending ajax request as data field.
data: {"search": search, "name":name, "car": car, "year":year},
Or you can use $( "form" ).serialize(); to convert all forms field automatically into name value pair like.
var my_data = $( "form" ).serialize();
// user that variable in your ajax call.
data: my_data,

Answer 2

Try this , use jquery bind
$('#search, #car, #year').bind( "keyup change", function() {
//put your ajax here
});

Answer 3

$(function() {
$("#search").keyup(function(){
var search = $("#search").val();
var name = $("#name").val();
var car = $("#car").val();
var year = $("#year").val();
$.ajax({
type: "POST",
url: "search.php",
data: {"search": search, "name":name, "car": car, "year":year},
cache: false,
success: function(response){
$("#res").html(response);
}
});
return false;
});
});

Answer 4

Try jquery .on() function
$(function() {
$("#search").on('keyup',function(){
var search = $("#search").val();
$.ajax({
type: "POST",
url: "search.php",
data: {"search": search},
cache: false,
success: function(response){
$("#res").html(response);
}
});
return false;
});
});