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

Question

我有一个 html 页面，包含 70 个左右的 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 以确保在字符串为空时显示结果。