Suchfunktion mit zwei Textfield-Daten in Jquery Ajax

Question

Ich möchte Daten aus MySQL-Tabelle suchen und abrufen. Ich benutzte zwei Textfelder, um Suchbegriffe zu erhalten. Ich habe dafür Jquery Ajax benutzt. Zum ersten Mal habe ich nur den Ort für die Suche benutzt. Dann funktioniert es. Wenn ich beide Textfelder benutzte, funktionierte es nicht. Dann bekam ich immer no data.

<div class="container"> 
<form action="search.php" method="post"> 
    <input type="text" id="location" name="location">&nbsp; 
    <input type="text" id="catogary" name="catogary"> 
    <script> 
     $('#location,#catogary').keyup(function() { 
      var loca=$(this).val(); 
      var cato=$(this).val(); 
      if(loca!='' || cato!=''){ 
       $.ajax({ 
        url:"search.php", 
        method:"POST", 
        data:{searc:loca,cato:cato}, 
        DataType:"text", 
        success:function (data) { 
         $('#result').html(data); 
        } 
       }); 
      } 
      else{ 
       $('#result').html(''); 
      } 

     }); 
    </script> 
</form> 
<div id="result"></div> 
</div> 

PHP-Code

<?php 

    $conn=mysqli_connect("localhost","root","","internship"); 
    $output=''; 
    $sql="select * from vacancy where location like '%".$_POST["searc"]."%' 
    and catogary like '%".$_POST["cato"]."%'"; 
    $res=mysqli_query($conn,$sql); 
    if(mysqli_num_rows($res)>0){ 

    while($row=mysqli_fetch_assoc($res)){ 
    ?> 
     <div class="bs-calltoaction bs-calltoaction-primary"> 
        <div class="row"> 
         <div class="col-md-9 cta-contents"> 
          <h1 class="cta-title">Its a Call To Action</h1> 
          <div class="cta-desc"> 
    <input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br> 
    <input type="text" value='<?= $row['company_name'];?>' readonly style="width: 75%"><br><br> 
    <input type="text" value='<?= $row['location'];?>' readonly style="width: 75%"><br><br> 
    <input type="text" value='<?= $row['qulification'];?>' readonly style="width: 75%"><br><br> 
    <input type="text" value='<?= $row['catogary'];?>' readonly style="width: 75%"><br><br> 
    <input type="text" value='<?= $row['indate'];?>' readonly style="width: 37.5%">&nbsp; 
    <input type="text" value='<?= $row['expdate'];?>' readonly style="width: 37.5%"> 
       </div> 

         </div> 
         <div class="col-md-3 cta-button"> 
          <a class="btn btn-primary btn-large" 
        href="#myModal" data-toggle="modal">Apply for job</a> 
         </div> 
        </div> 
       </div> 
      <?php 
     } 



      } 
      else{ 
      echo 'no data'; 
      } 

      ?> 

Answer 1

Ändern Sie die folgenden 2 Zeilen,

var loca=$(this).val(); 
var cato=$(this).val(); 

durch,

var loca=$('#location').val(); 
var cato=$('#catogary').val(); 

Auch dataType nicht DataType inverwenden .,

$.ajax({ 
    url:"search.php", 
    method:"POST", 
    data:{searc:loca,cato:cato}, 
    dataType:"text", // use dataType not DataType 
    success:function (data) { 
     $('#result').html(data); 
    } 
}); 

Answer 2

Verwenden var loca = $ ('# location') val(); var cato = $ ('# catogary') .val();

Eingang

Verwenden Sie diese Abfrage

$sql="select * from vacancy"; 
    $where = ""; 

    if(!empty($_POST["searc"]){ 
     if($where == "") { 
      $where = $where." where location like '%".$_POST["searc"]."%'"; 
     } else { 
      $where = $where." AND location like '%".$_POST["searc"]."%'"; 
     } 
    } 
    if(!empty($_POST["cato"]){ 
     if($where == "") { 
      $where = $where." where catogary like '%".$_POST["cato"]."%'"; 
     } else { 
      $where = $where." AND catogary like '%".$_POST["cato"]."%'"; 
     } 
    } 

    $sql = $sql.$where;