弹性搜索产品过滤器

时间:2018-06-15 10:48:31

标签: php elasticsearch logstash kibana

我使用Elastic Search& amp; amp;用PHP编写Logstash。

测试用例-1:

我有 1000 产品&每个页面都有 25 产品,因此分页将 1,2 .... 40

注意:分页工作正常而不使用过滤器。

测试案例-2:

我有 100 产品,在过滤器之后,颜色为蓝色&每个页面都有 25 产品,因此分页将 1,2,3,4

注意:当我点击第3个页面时,它会将我带到所有产品,而不是保留过滤产品和第3页。

让我知道如何保留过滤后的产品信息,以搜索过滤后的产品。

在下面找到我的完整源代码:

的index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script src="http://localhost/es/js/ajax.js"></script>

  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }

    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}

    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }

    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }

    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;}
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid text-center">
  <div class="row content">
    <div class="col-sm-2 sidenav">
      <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#filter1">
                        Filter
                    </a>
                    <a class="pull-right" data-toggle="collapse" href="#filter1">
                        <span class="glyphicon glyphicon-filter"></span>
                    </a>
                </h4>
            </div>
            <div class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="filter-setting">
                    <form action="" mathod="post" id="refine_search">
                        <label>Search by Anything</label>
                        <a class="pull-right collapsed-icon-toggle" href="#coll-0" data-toggle="collapse">
                        </a>
                        <br/>
                        <div id="coll-4" class="scroll-v-250px collapse in">
                            <div class="padding-v-xs" data-toggle="buttons">
                              <input type="text" name="_all" placeholder="Search Title, Author, ISBN" class="refine_search_field" value=""/>
                            </div>
                        </div>
                        <button  style ="display:none;" type="submit" class="btn btn-block btn-success">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="col-sm-8 text-left" id="refine_search_result">
      Welcome to JLG
    </div>

    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
            <input type="button" value="next" id="load_more" />
      </div>
    </div>
  </div>
</div>

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</body>
</html>

action.php的

<?php
include 'filter.php';
$object = new filter();
$filter_data = $_POST;
echo '<pre>'; print_r($_POST); echo '</pre>';
//echo $_POST["action"];
$action = $_POST["action"];

switch ($action) {
    case "filter":
    echo 'yes';
    foreach($filter_data as $filter_key => $filter_val){
      $check = array('action','size','pagenum');
      if(!in_array($filter_key, $check)){
        $query.= '"'.trim($filter_key).'":"'.trim(strtolower($filter_val)).'"';
      }
    }
    $param = '{
    "query": {
    "match": {'.$query.'}
    }}';

    $object->get_books($size=5, $pagenum=1, $param);
    break;
    default:
    if(isset($_POST["size"],$_POST["pagenum"])){
      $size = $_POST["size"];
      $pagenum = $_POST["pagenum"];
    } else{
      $size = 5;
      $pagenum = 1;
    }
    $object->get_books($size, $pagenum);
}
?>

filter.php

<?php
class filter{
  function __construct()
  {

  }
  public function get_books($size, $pagenum, $param){

echo $size.'--'.$pagenum.'--'.$param;

    $this->books_curl($size, $pagenum, $param);
    $cnt = $this->json_books['hits']['total']; //no. of records
    $last = ceil($cnt/$size); // no. of page

    //this makes sure the page number isn't below one, or more than our maximum pages
    // if ($pagenum < 1) {
    //  $pagenum = 1;
    // } elseif ($pagenum > $last)  {
    //  $pagenum = $last;
    // }
    $from = ($pagenum - 1) * $size;
    $this->books_curl($size, $pagenum, $param);

   echo '<div class="row">';
    echo '<h4>'.$this->json_books['hits']['total'].' resutls found</h4>';
      foreach($this->json_books['hits']['hits'] as $book){
        echo '<div class="col-sm-3"> <div class="well">';
        echo '<h4>'.$book['_source']['title'].'</h4>';
        echo '<p>ISBN: '.$book['_source']['isbn'].'</p>';
        echo '<p>'.strip_tags(substr($book['_source']['description'],0,150)).'</p>';
          echo '$'.$book['_source']['publisher_price'];
        echo '</div></div>';
      }
      echo '</div>';
echo '<ul class="pagination">';
     if ( ($pagenum-1) > 0) {
     echo '<li><a href="javascript:void(0);" class="page" data-size="'.$size.'" data-page="1">First</a></li>';
      echo '<li><a href="javascript:void(0);" class="page" data-size="'.$size.'" data-page="'.($pagenum-1).'">Previous</a></li>';
    }
    //Show page links
    for($i=1; $i<=$last; $i++) {
    if ($i == $pagenum ) {
    echo '<li class="active"><a href="javascript:void(0);">'.$i.'</a></li>';
    } else {
    echo '<li><a href="javascript:void(0);" class="page" data-size="'.$size.'" data-page="'.$i.'">'.$i.'</a></li>';
    }
    }

    if ( ($pagenum+1) <= $last) {
        echo '<li><a href="javascript:void(0);" class="page" data-size="'.$size.'" data-page="'.($pagenum+1).'">Next</a></li>';
   } if ( ($pagenum) != $last) {
        echo '<li><a href="javascript:void(0);" class="page" data-size="'.$size.'" data-page="'.$last.'">Last</a></li>';
        }
echo '</ul>';

  }
  public function books_curl($size, $pagenum, $param){
    $pagenum = $pagenum-1;
    $from = $size*$pagenum;

  //  echo $param;
    $this->curl = curl_init();
    curl_setopt($this->curl, CURLOPT_URL, "http://localhost:9200/jlg_test2/data/_search?size=".$size.'&from='.$from);
    curl_setopt($this->curl,CURLOPT_HTTPHEADER, 'Content-Type: application/json');
    curl_setopt($this->curl, CURLOPT_RETURNTRANSFER, 1);
    //if($param){
    curl_setopt($this->curl, CURLOPT_POSTFIELDS, $param);
  //}
    $this->books = curl_exec($this->curl);
    curl_close($this->curl);
    $this->json_books = json_decode($this->books, true);
  }
}
?>

ajax.js

(function($){
$(document).ready(function(){

//   $(window).on("load", function() {
// //alert('d');
//   $("a[data-page='10']").trigger('click');
// });

  load_books('default'); //load all books by default

  //filter
  $(".refine_search_field").on('change keyup',function(){
   load_books('filter'); //calling refine search function
  });

  function load_books(action){
    var path = "http://localhost/es/action.php";
    var input_data = $('#refine_search').serialize();
    var action = (input_data.length > 5) ? action:"default"; //checking filter is empty or not
    $.ajax({
      type: "POST",
      url:path,
      data: input_data+"&action="+action,
      //cache: false,
      success: function(data){
      $("#refine_search_result").html(data);
      }
      });
  }

  //books pagination
  $('body').on('click','.page',function(){
  console.log('ok');
  var path = "http://localhost/es/action.php";
    var size = $(this).attr('data-size');
    var pagenum = $(this).attr('data-page');
    var input_data = $('#refine_search').serialize();
    var action = (input_data.length > 5) ? 'filter':"default"; //checking filter is empty or not
    //if(action == 'filter'){

    //}
    //var action = 'load';
      $.ajax({
          type: "POST",
          url: path,
        //  data:{action:action,size:size,pagenum:pagenum},
          data: input_data+"&action="+action+"&size="+size+"&pagenum="+pagenum,
          //data: input_data+"size="+size+"&pagenum="+pagenum,
          //data:{action:action,size:size,pagenum:pagenum},
          //cache: false,
          // beforeSend: function() {
          //     $('#refine_search_result').html('<img src="images/loading.gif" alt="" style="display:block;height:auto;width:auto;margin:0 auto;"/>');
          // },
          success: function(data) {
            console.log(this.data);
              $("#refine_search_result").html(data);
              //$('.loader').html('');
          }
      });
  });
});
})(jQuery)

0 个答案:

没有答案