Question

我有4个下拉列表用作搜索过滤器，如图所示： search filters

首次加载页面时，不会应用任何过滤器，结果显示如下： result

所以我想要达到的目的是当用户选择让我们说一个类型学ex：apartament时，结果会刷新并自动显示，如果用户选择一个位置，它会显示所有类型的数据= appartament和位置=＆＃39; xyz＆＃39;所以一个用于4个过滤器。

这些是过滤器

<select name='typology_categories' id="categories" onchange="filter(this.value)">
    <option value=''>All</option>
    <option value='1'> house</option>
    <option value='2'> appartament</option>
    <option value='3'> trade center</option>
    <option value='3'> villa</option>                        
  </select>


<select name='location' id="location">
    <option value=''>All</option>
    <option value='1'> Italy</option>
    <option value='2'> Germany</option>
    <option value='3'> England</option>
    <option value='3'> USA</option>                        
  </select>

<select name='price' id="price">
    <option value="">All</option>
    <option value="1000">0 - 1,000</option>
    <option value="5000">1,000 - 5,000</option>
    <option value="50000">5,000 - 50,000</option>
    <option value="100000">50,000 - 100,000</option>
    <option value="500000">100,000 - 500,000</option>
    <option value="1000000">500,000 - 1,000,000</option>
    <option value="1000001">more then 1,000,000</option>
</select>

<select name='condition' id="condition" >
    <option value=''>All</option>
    <option value='1'> new</option>
    <option value='2'> used</option>
    <option value='3'> reconstructed</option>                      
  </select>

以下是未应用过滤器时加载页面时执行的代码：

<!-- HERE IS THE SEARCH DYNAMIC LIST on load of the page-->
                <?php 
                    $typologies_sql = "SELECT  * FROM typologies";
                    $typologies = mysql_query($typologies_sql) or die (mysql_error());
                    $numrowsTypologies = mysql_num_rows($typologies);
                    if($numrowsTypologies == 0){
                        $result = "<ul id=\"thumbs\">";
                        $result .= "No Data Found in Database";
                        $result .= "<ul id=\"thumbs\">";

                    } else {
                         $result = "<ul id=\"thumbs\">";
                            while($rowTypologies= mysql_fetch_assoc($typologies)){

                                $id                    = $rowTypologies['id'];
                                $item_id               = $rowTypologies['item_id'];
                                $title                 = htmlentities($rowTypologies['title'], ENT_COMPAT, "UTF-8");
                                $description           = htmlentities($rowTypologies['description'], ENT_COMPAT, "UTF-8");
                                $thumbnail             = htmlentities($rowTypologies['thumbnail'], ENT_COMPAT, "UTF-8");
                                $price                 = htmlentities($rowTypologies['price'], ENT_COMPAT, "UTF-8");
                                $typology_category_id  = htmlentities($rowTypologies['typology_category_id'], ENT_COMPAT, "UTF-8");
                                $typology_condition_id = htmlentities($rowTypologies['typology_condition_id'], ENT_COMPAT, "UTF-8");

                                $first = base64_encode($item_id);
                                $typologyThumbnails = "admin/app/webroot/img/uploads/typology/thumbnails/" . $thumbnail;

                                            $result .=  "<li class=\"item-thumbs span4 \">"; /* video - is the izotope data which should be passed dynamicly.*/
                                            $result .=        "<a class=\"hover-wrap fancybox-media\" data-fancybox-group=\"video\" title=\"{$description}\" href=\"new.php?id=$first\">";
                                            $result .=          "<span class=\"overlay-img\"></span>";
                                            $result .=          "<span class=\"overlay-img-thumb font-icon-search\"></span>";
                                            $result .=        "</a>";
                                            $result .=        "<img src=\"$typologyThumbnails\" alt=\"{$description}\">";
                                            $result .=  "</li>";

                            }
                        $result .= "<ul id=\"thumbs\">";

                    }
                ?>

这是在应用第一个过滤器之后：

<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" >
    function filter(typology_category_id){
        $.ajax({
        type: "POST",
        url: "search.php",
        data: { id: typology_category_id},
            success:function(data){
                $("#projects").html(data);
            }
        });
    }

</script>

search.php 文件是这样的：

<?php  
require_once('functions/functions.php');
require_once('functions/connection.php'); 
?>
<?php 
  if (isset($_POST['id'])) {
    $id_update = trim(mysql_prep($_POST['id']));
  /* Query for the typology*/
  $queryTypologies = "SELECT * ";
  $queryTypologies .= "FROM typologies";
  if (isset($id_update) && !empty($id_update) && $id_update!='') {
   $queryTypologies .= " WHERE typology_category_id = (SELECT id FROM typology_categories WHERE id ='".$id_update."' LIMIT 1)";
  }  
  $typologies = mysql_query($queryTypologies) or die (mysql_error());
                         $result = "<ul id=\"thumbs\">";
                            while($rowTypologies= mysql_fetch_assoc($typologies)){
                                $id                    = $rowTypologies['id'];
                                $item_id               = $rowTypologies['item_id'];
                                $title                 = htmlentities($rowTypologies['title'], ENT_COMPAT, "UTF-8");
                                $description           = htmlentities($rowTypologies['description'], ENT_COMPAT, "UTF-8");
                                $thumbnail             = htmlentities($rowTypologies['thumbnail'], ENT_COMPAT, "UTF-8");
                                $price                 = htmlentities($rowTypologies['price'], ENT_COMPAT, "UTF-8");
                                $typology_category_id  = htmlentities($rowTypologies['typology_category_id'], ENT_COMPAT, "UTF-8");
                                $typology_condition_id = htmlentities($rowTypologies['typology_condition_id'], ENT_COMPAT, "UTF-8");                  
                                $first = base64_encode($item_id);
                                            $result .=  "<li class=\"item-thumbs span4 \">"; 
                                            $result .=        "<a class=\"hover-wrap fancybox-media\" data-fancybox-group=\"video\" title=\"{$description}\" href=\"new.php?id=$first\">";
                                            $result .=          "<span class=\"overlay-img\"></span>";
                                            $result .=          "<span class=\"overlay-img-thumb font-icon-search\"></span>";
                                            $result .=        "</a>";
                                            $result .=        "<img src=\"$thumbnail\" alt=\"{$description}\">";
                                            $result .=  "</li>";

                            }
                        $result .= "</ul>";
                   echo $result;
  }
    mysql_close();
 ?>

所以我想要实现的是，在更改下拉选择过滤器时，结果搜索会动态更改。

任何帮助都会非常适合。提前完成。

Answer 1

//Just add a form tag in your html code..  
<form name="search_form" id="search_form">  

      <select name='typology_categories' id="categories" class="select_filter">
            <option value=''>All</option>
            <option value='1'> house</option>
            <option value='2'> appartament</option>
            <option value='3'> trade center</option>
            <option value='3'> villa</option>                        
          </select>


        <select name='location' id="location" class="select_filter">
            <option value=''>All</option>
            <option value='1'> Italy</option>
            <option value='2'> Germany</option>
            <option value='3'> England</option>
            <option value='3'> USA</option>                        
          </select>

        <select name='price' id="price" class="select_filter">
            <option value="">All</option>
            <option value="1000">0 - 1,000</option>
            <option value="5000">1,000 - 5,000</option>
            <option value="50000">5,000 - 50,000</option>
            <option value="100000">50,000 - 100,000</option>
            <option value="500000">100,000 - 500,000</option>
            <option value="1000000">500,000 - 1,000,000</option>
            <option value="1000001">more then 1,000,000</option>
        </select>

        <select name='condition' id="condition" class="select_filter" >
            <option value=''>All</option>
            <option value='1'> new</option>
            <option value='2'> used</option>
            <option value='3'> reconstructed</option>                      
          </select>
    </form>


// You Javascript code
  $('.select_filter').on('change',function(){
      $.ajax({
           type: "POST",
           url: "search.php",
           data: $('#search_form').serialize(), // You will get all the select data..
            success:function(data){
                $("#projects").html(data);
            }
        });
  });


// Just print the $_POST in your php i.e.echo "<pre>";print_r($_POST);echo "</pre>";

多选搜索过滤器

1 个答案: