javascript - 如何使用输入框和下拉菜单过滤数据

Question

嘿，我的代码有一个问题，我试图过滤来自数据库的数据并将其显示在表中。我正在使用 AJAX 将请求发送到 PHP 页面。我在寻找解决方案方面没有任何运气。 (它将类似于您常见的房地产网站或零售网站等，用户可以在搜索框中输入位置，进行搜索，然后使用 2 个下拉菜单过滤显示的数据)。

我的index.php页面有3个输入(一个文本框和2个下拉菜单)

  <form action="<?php echo $_SERVER['PHP_SELF']; ?>">    
     <input type="text" class="searchForm" id="search" placeholder="Stuff" autocomplete="off">   
  <div id="here"></div>
  <select class="orderType" name="type" id="orderByType" data-toggle="dropdown" onchange="displaySelection(this.value)">
      <option value="" selected>--------</option>
      <option value="dropdown1" selected>Dropdown1</option>
      <option value="dropdown1" selected>Dropdown1</option>
  </select>
  <select class="order" name="order" id="orderBy" data-toggle="dropdown">
      <option value="" selected>--------</option>
      <option value="lowest">Lowest</option>
      <option value="highest">Highest</option>
  </select>
</form>
  <div id="searchTable">

然后我的ajax调用index.php页面(稍后AJAX将是另一个问题，因为我确信有比我现有的更好的方法来发送数据)

function fill(Value)
{
    $('#search').val(Value);
    $('#here').hide();
}
$(document).ready(function(){
    $("#search").keyup(function(){
        var x = $('#search').val();

        if(x==""){
            $("#here").html("");
            $('#searchTable').html("");
        }
        else{
        $.ajax({
            type:'POST',
            url:'test.php',
            data:'q='+x,
            success:function(html){
                $("#here").html(html).show();
            }   
        });
        }
    });
    $('.searchForm').change(function(){
        var type = $('#search').val();
        var city = $('#city').text();

        $.ajax({
            type: 'POST',
            url: 'test.php',
            data: { search : type, city : city },
            success: function(response){
                $("#searchTable").html(response);
                $('#search').live("keypress",function(e){
                var code = (e.keyCode ? e.keyCode : e.which);
                if(code == 13){
                    e.preventDefault();
                    e.stopPropagation();
                    $('#searchTable').show();
                }
            });
            }
        });
    });
        $('.orderClass').change(function(){
            var order = $('#orderBy').val();
            var city = $('#city').text();

            $.ajax({
                type: 'POST',
                url: 'test.php',
                data: { orderBy : order, city : city },
                success: function(response){
                    $("#searchTable").html(response);
                }
            });
        });
        $('.orderType').change(function(){
            var type = $('#orderByType').val();
            var city = $('#city').text();

            $.ajax({
                type: 'POST',
                url: 'test.php',
                data: { orderByType : type, city : city},
                success: function(response){
                    $("#searchTable").html(response);
                }
            });
        });
    });

然后在 test.php 上(我可以使用 2 个下拉菜单过滤数据，这样效果很好，但我不确定如何过滤搜索输入框中显示的数据。)

       $stmt = "SELECT * FROM places";
       if(isset($_POST['search'])){
           $search = htmlspecialchars($_POST['search']);
           $stmt .= " WHERE name = :search";
        }
        if(isset($_POST['orderByType'])){       
           $selection = $_POST['orderByType'];
           $stmt .= " AND type = :selection";
        }
        if(isset($_POST['orderBy'])){
           $order = $_POST['orderBy'];
           $selection = $_SESSION['id'];
           $stmt .= " ORDER BY".$order;
        }   
        $stmt = $conn->prepare($stmt);
        $search = "%".$search."%";
        $stmt->bindValue(':search', $search, PDO::PARAM_STR);
        $stmt->bindParam(":selection", $selection);

        if($stmt->rowCount() > 0){
           $result = $stmt->fetchAll();
           foreach($result as $row){
               echo $row['data'];
           }
         }
     //Search input live search
     if(!empty($_POST['q'])){
        $name = $_POST['q'];
        $name = htmlspecialchars($name);
        $liveSearch = $conn->prepare("SELECT name, city FROM places WHERE name LIKE :name OR city LIKE :name");
        $name = "%".$name."%";
        $liveSearch->bindValue(':name', $name, PDO::PARAM_STR);
        $result = $liveSearch->fetchAll();

        if($liveSearch->rowCount() > 0){
            foreach($result as $row){
                   echo $row['name'];
            }
         }
         else{
            echo "No results found";
         }
       }

(如果有一个很棒的系统可以使用用户输入进行搜索，然后使用下拉菜单进行过滤，请告诉我)

提前致谢。

Answer 1

如果我要这样做，出于重用原因，我可能会创建一个 ajax 对象，并创建一个 php 对象来处理查询:

/defines.php

您可能有也可能没有定义您的数据库凭据。我在下面的类(class)中使用这些。

define("DB_USER",'root');
define("DB_PASS",'password');
define("DB_HOST",'localhost');
define("DB_NAME",'dbname');

/classes/Query.php

这是一个精简的查询引擎，可以进行基本查询。我用它来节省重写一堆准备和执行的时间，但你可以在那里做任何你喜欢的事情。

class Query
    {
        private static  $singleton,
                        $con;

        private         $rquery,
                        $bind;
        public  function __construct()
            {
                if(self::$singleton instanceof Query)
                    return self::$singleton;

                self::$singleton    =   $this;
            }

        public  function connect()
            {
                if(self::$con instanceof PDO)
                    return self::$con;

                self::$con  =   new PDO('mysql:host='.DB_HOST.';dbname='.DB_NAME,DB_USER,DB_PASS);

                return self::$con;
            }

        public  function query($sql,$bind = false)
            {
                $this->bind =   false;
                try {
                    if(empty($bind)) {
                        $this->rquery   =   $this->connect()->query($sql);
                    }
                    else {
                        foreach($bind as $key => $value) {
                            $bkey               =   ":{$key}";
                            $this->bind[$bkey]  =   $value;
                        }

                        $this->rquery   =   $this->connect()->prepare($sql);
                        $this->rquery->execute($this->bind);
                    }
                }
                catch (PDOException $e){
                    die('An application error occurred.');
                }
                return $this;
            }

        public  function getResults()
            {
                while($results = $this->rquery->fetch(PDO::FETCH_ASSOC)) {
                    $row[]  =   $results;
                }

                return (!empty($row))? $row : 0;
            }
    }

/functions/searchPlaces.php

function searchPlaces($search,$type = false,$orderby = false)
    {
        $sVal   =   "%".$search."%";
        array();
        $sql[]  =   'SELECT * FROM places WHERE `name` LIKE :0 or `city` LIKE :1';
        $bind   =   array_fill(0,2,$sVal);

        if(!empty($type)) {
            $bind[] =   $type;
            $sql[]  =   'AND `type` = :2';
        }
        if(!empty($orderby)) {
            $order  =   ($orderby == 'lowest')? 'ASC' : 'DESC';
            $sql[]  =   "order by `ID` {$order}";
        }

        // Here is where I use the query to send back results from DB
        // you can just use a regular prepare/bind/execute if you like
        $qEngine    =   new Query();
        return  $qEngine->query(implode(' ',$sql),$bind)->getResults();
    }

/test.php

<?php
// Put our db credentials
require_once(__DIR__.'/defines.php');
if(!empty($_POST)) {
    // Needs the search function and the query class
    // (disregard class if you don't use it)
    require_once(__DIR__.'/functions/searchPlaces.php');
    require_once(__DIR__.'/classes/Query.php');
    // I am just sending an array back, but you can format it as you please
    print_r(searchPlaces($_POST['search'],$_POST['type'],$_POST['order']));
    exit;
}

/index.php

<script>
// I like to make an ajax engine, it saves on rewriting all the same stuff
// on later ajax calls
var AjaxEngine  =   function($)
    {
        this.send   =   function(data,func)
            {
                $.ajax({
                    url: '/test.php',
                    data: data,
                    type: 'post',
                    success: function(response){
                        func(response);
                    }
                });

                return this;
            };
    }
// You only need one document ready
$(document).ready(function(){
    // Make an ajax engine
    var Ajax    =   new AjaxEngine($);
    // If form changes or key up in text field
    $('.searchForm,.ajaxer>select').on('keyup change',function(e) {
        e.preventDefault();
        // Serialize the form
        var formData    =   $('.ajaxer').serialize();
        // Send the ajax and return results
        Ajax.send(formData,function(response) {
            $('#searchTable').html(response);
        });
    });
});
</script>
<!-- Note changes to the form for classes and ids -->
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" class="ajaxer">    
    <input name="search" type="text" class="searchForm" id="search" placeholder="Stuff" autocomplete="off" />
    <div id="here"></div>
    <select class="orderType" name="type" data-toggle="dropdown">
        <option value="" selected>--------</option>
        <option value="dropdown1" selected>Dropdown1</option>
        <option value="dropdown1" selected>Dropdown1</option>
    </select>
    <select class="order" name="order" data-toggle="dropdown">
        <option value="" selected>--------</option>
        <option value="lowest">Lowest</option>
        <option value="highest">Highest</option>
    </select>
 </form>
 <div id="searchTable"></div>