Question

我的html页面包含70个左右的div，所有div都具有相同的名称，但每个都有不同的内容。我试图通过使用jquery过滤内容来使它们可搜索。我已经有点工作了，你可以看到这里的页面： http://smokefreehousingak.org/find-housing.html

我遇到的麻烦是将来自文字的输入和您在搜索栏下方看到的选项结合起来。现在div被过滤了，但只有每个项目，也就是你不能在文本输入中放入一个字符串，然后更改选择的值，并让它根据所有3或4个数据过滤div。它只会根据最后一次作出的输入或选择进行过滤。

输入过滤的jquery / javascript因此是：

function searchPage(searchQuery) {
    $('.secondary-container').hide();
    var searchQuery = $('#search-criteria').val();
    console.log("search query is");
    console.log(searchQuery);
    $('.secondary-container').each(function(){
       if($(this).text().toUpperCase().indexOf(searchQuery.toUpperCase()) != -1){
           $(this).fadeIn(450);
       }
    });
   console.log("page searched");
}
$('#search').click(function(){
    searchPage();
});
$("#searchbox").submit(function() {
    searchPage();
    return false;
});

正在过滤的每个项目的HTML都是这样（只是每个项目都有不同的信息）：

<div class="main-container secondary-container">
    <aside id="filler-aside">

    </aside>
    <div class="main-content full listing">
        <div class="main-content listing-picture" style="background: url('img/maps/image70.jpg') no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;"></div>
        <div class="main-content listing-data">
        <h3>"Retirement Community of Fairbanks Inc."</h3>
            <h3>Raven Landing</h3>
            <p><span>Address:</span> 1222 Cowles St.<br>
                <span>City:</span> Fairbanks<br>
                <span>Zip:</span> 99701<br>
                <span>Type of Housing:</span> Senior <br>
                <span>Classification:</span> * Smoking is not allowed anywhere inside a building or complex</p>
            </div>
        </div>
    </div>

基于一个选择过滤div的jquery / javascript就像这样（这是城市选择的代码）：

function citySelect() {
    $('.secondary-container').hide();
    $("#city-select").bind("change", function() {
        console.log("city changed to");
        city = $("#city-select option:selected").text();
        console.log(city);
        // searchPage(city);
        $('.secondary-container').each(function(){
       if($(this).text().toUpperCase().indexOf(city.toUpperCase()) != -1){

           $(this).fadeIn(450);
           console.log("text");
       }
    });
    });

现在我每个都选择了自己的函数，它在被执行后调用，然后根据所选数据过滤div。我认为我需要的只是一个函数，只要一个选择或输入被执行就被调用，它将根据所有输入或选择过滤div，而不是静态选择一个数据来处理。

目前，输入搜索过滤器的工作原理是查看是否有任何div包含输入到字段中的文本：

$('.secondary-container').each(function(){
       if($(this).text().toUpperCase().indexOf(searchQuery.toUpperCase()) != -1){
           $(this).fadeIn(450);
       }
    });

我需要以某种方式说它是否包含searchQuery和输入数据等......当输入相同的东西时，我基本上需要整个搜索功能来对所有数据输入进行操作而不仅仅是一块。有什么建议吗？

Answer 1

您可以这样做：

function searchPage() {
    var search = $('#search-criteria').val().toUpperCase();
    var city = $("#city-select option:selected").text().toUpperCase();

    $('.secondary-container').each(function(){
         var text = $(this).text().toUpperCase();
         $(this).hide();
         if((!search || text.indexOf(search) !== -1) && (!city || text.indexOf(city) !== -1)) {
             $(this).fadeIn(450);
         }
     });
};

我还添加了!search和!city，以确保在字符串为空时显示结果。

Answer 2

由于上面忽略了选项，如果它们是空的，但最初它们的默认值为“Filter By ...”，我做了一个函数，检查select的值是否为“Filter By ...”如果是这样，它将城市变量设置为空，以便它被忽略（通过！search和！city），如果值已经改变，那么它将按照正常情况执行。

var search = $('#search-criteria').val().toUpperCase();
var city = $("#city-select option:selected").text().toUpperCase();
var cityStart = "Filter By City";

if(city.indexOf(cityStart.toUpperCase()) != -1){
        console.log("city untouched");
        console.log(cityStart);
        var city = "";
        console.log(city);
    } else {
        console.log("city not default");
    }
    $('.secondary-container').each(function(){
         var text = $(this).text().toUpperCase();
         $(this).hide();
         if((!search || text.indexOf(search) !== -1) && (!city || text.indexOf(city) !== -1)) {
             $(this).fadeIn(450);
         }
     });

如何根据文本输入过滤div并一起选择输入

2 个答案: