2016-08-14 300 views
0

嘿所以我有我的代碼的問題,我試圖過濾來自數據庫的數據並將其顯示在表中。我正在使用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"> 

然後我index.php頁面上的Ajax調用(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

注意,你只需要一個'$(document).ready(function(){'來包裝你想要在文檔準備就緒的所有東西。 – Rasclatt

+0

你應該能夠在窗體上做一個'onchange'觀察者,而不是單獨的內部元素。 – Rasclatt

+0

另外,表單上的關閉標記怎麼沒有超過'