使用jQuery基于multisearchbar过滤结果

时间:2018-06-08 11:13:38

标签: javascript php jquery

我希望用户能够基于键入多个搜索栏组件来搜索作业,但在我的代码中,它可以基于一个搜索栏进行搜索。为此,我使用两个变量search和search2,它只能用于搜索变量。

HTML

        <form action="search.php" method="GET">
        <input type="text" id="" class="form-control searchBar" placeholder="Designation">
        <input type="text" id="" class="form-control searchBar" placeholder="City" />
       <button id="searchBtn" type="button" class="btn btn-info btn-flat">Go!</button>
     </form>

的javascript

     <script type="text/javascript">
          $("#searchBtn").on("click", function(e) {
            e.preventDefault();
            var searchResult = $(".searchBar ").val();
            var filter = "searchBar";
            if(searchResult != "" ) {
              $("#pagination").twbsPagination('destroy');
              Search(searchResult, filter);
            } else {
              $("#pagination").twbsPagination('destroy');
              Pagination();
            }
          });
        </script>
    <script type="text/javascript">
  function Search(val, filter) {
    $("#pagination").twbsPagination({
      totalPages: <?php echo $total_pages; ?>,
      visible: 5,
      onPageClick: function (e, page) {
        e.preventDefault();
        val = encodeURIComponent(val);
        $("#target-content").html("loading....");
        //$("#target-content").load("search.php?page="+page+"&search="+val+"&filter="+filter); 
        $("#target-content").load("search.php?page="+page+"&search="+val+"&search2="+val+"&filter="+filter);    


      }
    });
  }
</script>

我的search.php页面:

 <?php
        session_start();
        require_once("db.php");
        $limit = 4;
       if(isset($_GET["page"])) 
       {
           $page = $_GET['page'];
       } 
      else 
      {
            $page = 1;
      }
      $start_from = ($page-1) * $limit;
      if(isset($_GET['filter']) && $_GET['filter']=='searchBar')
      {

         $search = $_GET['search'];
         $search2 = $_GET['search2'];
        $sql = "SELECT * FROM job_post INNER JOIN company ON job_post.id_company=company.id_company WHERE jobtitle LIKE '%$search%' OR city LIKE '%$search2%' LIMIT $start_from, $limit";
                        }
 ?>

1 个答案:

答案 0 :(得分:0)

我有两个输入字段一个用于jobtitle,一个用于city,并且基于此我想要相关输出,例如:jobtile =&#39;软件开发者&#39;和city =&#39; delhi&#39;,我的数据库仅显示城市德里软件devloper的结果。

的search.php:

if(isset($_GET['filter']) && $_GET['filter']=='searchBar')
        {

                $search = $_GET['search'];
                $search2 = $_GET['search2'];
                $sql = "SELECT * FROM job_post INNER JOIN company ON job_post.id_company=company.id_company WHERE jobtitle LIKE '%$search%' OR city LIKE '%$search2%' LIMIT $start_from, $limit";
        }

        else if(isset($_GET['filter']) && $_GET['filter']=='experience')
        {
            $sql = "SELECT * FROM job_post WHERE experience >='$_GET[search]' LIMIT $start_from, $limit";
        }

        $result = $conn->query($sql);
        if($result->num_rows > 0)
        {
            while($row = $result->fetch_assoc())
            {
                $sql1 = "SELECT * FROM company WHERE id_company='$row[id_company]'";
                $result1 = $conn->query($sql1);
                if($result1->num_rows > 0)
                {
                    while($row1 = $result1->fetch_assoc()) 
                    {
    ?>

                      <div class="attachment-block clearfix">
                      <img class="attachment-img" src="uploads/logo/<?php echo $row1['logo']; ?>" alt="Attachment Image">
                      <div class="attachment-pushed">
                      <h4 class="attachment-heading"><a href="view_job_post.php?id=<?php echo $row['id_jobpost']; ?>"><?php echo $row['jobtitle']; ?></a> <span class="attachment-heading pull-right">$<?php echo $row['maximumsalary']; ?>/Month</span></h4>
                      <div class="attachment-text">
                          <div><strong><?php echo $row1['companyname']; ?> |\ <?php echo $row1['city']; ?> | Experience <?php echo $row['experience']; ?> Years</strong></div>
                      </div>
                      </div>
                      </div>
    <?php
                    }
                }
            }
        } 
    }
    $conn->close();
    ?>