2014-02-24 199 views
0

AJAX搜索我有一個搜索表單:沒有 「提交」 按鈕

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

而且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搜索的作品。使用AJAX代碼:

$(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。如何添加到ajax代碼一些輸入和選擇以及如何保存並添加到search.php中的搜索結果?

對不起我的英文。

回答

2

你可以發表你的領域或者名稱值對格式,如: -

var search = $("#search").val(); 
var name = $("#name").val(); 
var car = $("#car").val(); 
var year = $("#year").val(); 

而且用戶查詢聖在發送ajax請求作爲數據字段時響鈴。或者你可以使用$(「form」).serialize();或者你可以使用$(「form」).serialize();或者你可以使用$(「form」)。將所有表單字段自動轉換爲名稱值對。

var my_data = $("form").serialize(); 
// user that variable in your ajax call. 
data: my_data, 
1

試試這個,使用jQuery綁定

$('#search, #car, #year').bind("keyup change", function() { 
    //put your ajax here 
}); 
-1

Try jquery .on()功能

$(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; 
      }); 
     }); 
0
$(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; 
      }); 
     });