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

时间:2016-08-14 21:59:23

标签: javascript php ajax

嘿所以我的代码存在问题,我试图过滤来自数据库的数据并将其显示在表格中。我正在使用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";
         }
       }

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

提前致谢。

0 个答案:

没有答案