jquery ajaxで2つのテキストフィールドデータを使用する検索機能

Question

MySQLテーブルからデータを検索して検索したい。私は2つのテキストフィールドを使用して検索キーワードを取得しました。私はこれにjquery ajaxを使った。初めて私は検索のためだけに場所を使いました。その後、それは動作します。私は両方のテキストフィールドを使用するとうまくいきませんでした。それから私はいつも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コード

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

2行以下の変更、

によって

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

、

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

もでdataTypeないDataTypeを使用します。、

$.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

使用 するvar LOCA = $（ '＃場所'）のval（）; var cato = $（ '＃catogary'）。val（）;

が入力

使用あなたが満足する条件は、クエリで直接ポストデータを使用していないデータの両方を持っていない可能性があります。このクエリ

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