2016-08-14 2 views
0

Hey Also ich habe ein Problem mit meinem Code, wo ich versuche, die Daten aus der Datenbank zu filtern und in einer Tabelle anzuzeigen. Ich verwende AJAX, um die Anfrage an die PHP-Seite zu senden. Ich hatte kein Glück bei der Suche nach einer Lösung. (Es ähnelt Ihrer allgemeinen Immobilienwebsite oder dem Einzelhandel usw., wo der Benutzer einen Ort in das Suchfeld eingeben, danach suchen und dann die angezeigten Daten mithilfe der 2 Dropdown-Menüs filtern kann).So filtern Sie Daten mit einem Eingabefeld und Dropdown-Menüs

Meine index.php Seite hat drei Eingänge (ein Textfeld und zwei Dropdown-Listen)

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

meine Ajax-Aufrufe auf der Seite index.php Dann (Die AJAX wird eine andere Frage später, wie ich sicher bin, gibt es einen besseren Weg, als das, was ich habe, um die Daten zu senden)

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

und dann auf test.php (ich die Daten mit den zwei Dropdown-Menüs auswählen kann, und das wird funktionieren, aber ich bin nicht sicher, wie die Daten gefiltert werden, die aus dem Sucheingabefeld angezeigt werden.)

 $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"; 
     } 
     } 

(Wenn es ein großes System vorhanden ist, die Benutzereingaben mit suchen und filtert es dann Drop-Down-Menü, dann lass es mich wissen)

Vielen Dank im Voraus.

+0

Seitennotiz, Sie brauchen nur ein '$ (document) .ready (function() {' um alles, was Sie wollen, auf Dokument bereit zu machen. – Rasclatt

+0

Sie sollten in der Lage sein, nur einen "onchange" -Observer auf dem Formular als Ganzes statt der Elemente darin einzeln auszuführen. – Rasclatt

+0

Wie kommt es, dass Ihr Close-Tag auf dem Formular nicht über die Drop-downs "