没有“提交”按钮的 Ajax 搜索答案

【问题标题】：Ajax search without "submit" button没有“提交”按钮的 Ajax 搜索
【发布时间】：2014-02-24 04:34:41
【问题描述】：

我有一个搜索表单：

<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."'";

实时搜索有效。使用 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" 工作正常，但我无法添加搜索另一个选择和更多输入。如何在 ajax 代码中添加一些输入和选择以及如何保存和添加到 search.php 中的搜索结果？

对不起我的英语。

【问题讨论】：

标签： php jquery ajax search post

【解决方案1】：

您可以将字段发布为名称值对格式，例如：-

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

在将 ajax 请求作为数据字段发送时，该查询字符串的用户。

data: {"search": search, "name":name, "car": car, "year":year},

或者你可以使用 $( "form" ).serialize();将所有表单字段自动转换为名称值对。

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

【讨论】：

【解决方案2】：

试试这个，使用jquery绑定

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

【讨论】：

【解决方案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;
            });
        });

【讨论】：

【解决方案4】：

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

【讨论】：