如何顯示報警時，沒有結果發現

我有這樣的代碼： https://fiddle.jshell.net/cabeqaky/1/如何顯示報警時，沒有結果發現

當我在搜索欄像「asdfdsas」型，沒有找到結果。未找到結果時如何顯示警報？和複選框相同嗎？

-HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<pre id=result> </pre> 
<input type="text" id="searchFlowerNames" placeholder="Type a flower name..."><span id="searchResult"></span> 
<div class="flowers-wrap"> 
    <h3 style="font-size:14px; font-weight:normal;">Available Flowers</h3> 
    <p style="font-size:12px;"><strong>Filter flowers by colour:</strong></p> 
    <form> 
     <label style="font-size:12px;"> 
      <input type="checkbox" name="fl-colour" value="red" id="red" /> Red</label> 
     <br> 
     <label style="font-size:12px;"> 
      <input type="checkbox" name="fl-colour" value="yellow" id="yellow" /> Yellow</label> 
     <br> 
     <label style="font-size:12px;"> 
      <input type="checkbox" name="fl-colour" value="pink" id="pink" /> Pink</label> 
     <br> 
     <label style="font-size:12px;"> 
      <input type="checkbox" name="fl-colour" value="purple" id="purple" /> Purple</label> 
     <br> 
     <label style="font-size:12px;"> 
      <input type="checkbox" name="fl-colour" value="green" id="green" /> Green</label> 
     <br> 
     <label style="font-size:12px;"> 
      <input type="checkbox" name="fl-colour" value="other" id="other" /> Other</label> 
    </form> 
    <p style="font-size:12px;"><strong>Filter flowers by size:</strong></p> 
    <form> 
     <label style="font-size:12px;"> 
      <input type="checkbox" name="fl-size" value="tiny" id="tiny" /> Tiny</label> 
     <br> 
     <label style="font-size:12px;"> 
      <input type="checkbox" name="fl-size" value="small" id="small" /> Small</label> 
     <br> 
     <label style="font-size:12px;"> 
      <input type="checkbox" name="fl-size" value="medium" id="medium" /> Medium</label> 
     <br> 
     <label style="font-size:12px;"> 
      <input type="checkbox" name="fl-size" value="large" id="large" /> Large</label> 
     <br> 
     <label style="font-size:12px;"> 
      <input type="checkbox" name="fl-size" value="giant" id="giant" /> Giant</label> 
    </form> 
</div> 
<div class="continents-wrap"> 
    <h3 style="font-size:14px; font-weight:normal;">Available Continents</h3> 
    <div class="continents" style="font-size:12px;"> 
     <div>Africa 
      <input type="checkbox" name="fl-cont" value="africa" id="africa" /> 
     </div> 
     <div>Europe 
      <input type="checkbox" name="fl-cont" value="europe" id="europe" /> 
     </div> 
     <div>Asia 
      <input type="checkbox" name="fl-cont" value="asia" id="asia" /> 
     </div> 
     <div>North America 
      <input type="checkbox" name="fl-cont" value="north-america" id="north-america" /> 
     </div> 
     <div>South America 
      <input type="checkbox" name="fl-cont" value="south-america" id="south-america" /> 
     </div> 
     <div>Antarctica 
      <input type="checkbox" name="fl-cont" value="antarctica" id="antarctica" /> 
     </div> 
     <div>Australasia 
      <input type="checkbox" name="fl-cont" value="australasia" id="australasia" /> 
     </div> 
    </div> 
</div> 
<div class="flowers"> 
    <div class="flower" data-id="aloe" data-category="green small medium africa">Aloe</div> 
    <div class="flower" data-id="lavendar" data-category="purple green medium africa europe">Lavender</div> 
    <div class="flower" data-id="stinging-nettle" data-category="green large africa europe asia">Stinging Nettle</div> 
    <div class="flower" data-id="gorse" data-category="green yellow large europe">Gorse</div> 
    <div class="flower" data-id="hemp" data-category="green large asia">Hemp</div> 
    <div class="flower" data-id="titan-arum" data-category="purple other giant asia">Titan Arum</div> 
    <div class="flower" data-id="golden-wattle" data-category="green yellow large australasia">Golden Wattle</div> 
    <div class="flower" data-id="purple-prairie-clover" data-category="purple green other medium north-america">Purple Prairie Clover</div> 
    <div class="flower" data-id="camellia" data-category="pink other large north-america">Camellia</div> 
    <div class="flower" data-id="scarlet-carnation" data-category="red medium north-america">Scarlet Carnation</div> 
    <div class="flower" data-id="indian-paintbrush" data-category="red medium north-america">Indian Paintbrush</div> 
    <div class="flower" data-id="moss-verbena" data-category="purple other small south-america">Moss Verbena</div> 
    <div class="flower" data-id="climbing-dayflower" data-category="blue tiny south-america">Climbing Dayflower</div> 
    <div class="flower" data-id="antarctic-pearlwort" data-category="green yellow large antarctica">Antarctic Pearlwort</div> 
</div>

-CSS

body { 
    font-family: 'Arial'; 
    color: #646464; 
} 

.continents-wrap { 
    float: left; 
    width: 20%; 
    margin: 0 5% 0 0; 
    padding: 0; 
} 

.flowers-wrap { 
    float: left; 
    width: 20%; 
    margin: 0 5% 0 0; 
    padding: 0; 
    position: relative; 
} 

.flowers { 
    float: left; 
    width: 50%; 
} 

.flowers div { 
    float: left; 
    width: 90%; 
    height: 68px; 
    line-height: 68px; 
    padding: 0 5%; 
    background: #eee; 
    margin: 0 0 1px; 
    position: relative; 
}

---- JS

var $filterCheckboxes = $('input[type="checkbox"]'); 
$filterCheckboxes.on('change', function() { 
    var selectedFilters = {}; 
    $filterCheckboxes.filter(':checked').each(function() { 
     if (!selectedFilters.hasOwnProperty(this.name)) { 
      selectedFilters[this.name] = []; 
     } 
     selectedFilters[this.name].push(this.value); 
    }); 
    // create a collection containing all of the filterable elements 
    var $filteredResults = $('.flower'); 
    // loop over the selected filter name -> (array) values pairs 
    $.each(selectedFilters, function(name, filterValues) { 
     // filter each .flower element 
     $filteredResults = $filteredResults.filter(function() { 
      var matched = false, 
       currentFilterValues = $(this).data('category').split(' '); 
      // loop over each category value in the current .flower's data-category 
      $.each(currentFilterValues, function(_, currentFilterValue) { 
       // if the current category exists in the selected filters array 
       // set matched to true, and stop looping. as we're ORing in each 
       // set of filters, we only need to match once 
       if ($.inArray(currentFilterValue, filterValues) != -1) { 
        matched = true; 
        return false; 
       } 
      }); 
      // if matched is true the current .flower element is returned 
      return matched; 
     }); 
    }); 
    $('.flower').hide().filter($filteredResults).show(); 
}); 

var flowerArray = []; 
$(".flower").each(function(){ 
    flowerArray.push($(this).html().toLowerCase()); 
}); 
//console.log(flowerArray); 
$("#searchFlowerNames").on("input",function(){ 
    var searchInput = $(this).val().toLowerCase(); 
    $("input[name='fl-colour']").attr("checked",false); 
    $("input[name='fl-size']").attr("checked",false); 
    $("input[name='fl-cont']").attr("checked",false); 
    if(searchInput!=""){ 
     $(".flower").hide(); 
     $(".flower").each(function(){ 
      // We have a match. 
      if($(this).html().toLowerCase().indexOf(searchInput) != -1){ 
       $(this).show(); 
       // To check the relevant checkboxes, have to get the category of this match. 
       var thisFlowerData = $(this).data("category").toLowerCase().split(" "); 
       //console.log(thisFlowerData); 
       // Set the flower color checkboxes 
       $("input[name='fl-colour']").each(function(){ 
        if(thisFlowerData.indexOf($(this).val().toLowerCase()) != -1){ 
         $(this).prop("checked",true); 
         //console.log($(this).val()); 
        } 
       }); 
       // Set the flower size checkboxes 
       $("input[name='fl-size']").each(function(){ 
        if(thisFlowerData.indexOf($(this).val().toLowerCase()) != -1){ 
         $(this).prop("checked",true); 
         //console.log($(this).val()); 
        } 
       }); 
       // Set the flower continent checkboxes 
       $("input[name='fl-cont']").each(function(){ 
        if(thisFlowerData.indexOf($(this).val().toLowerCase()) != -1){ 
         $(this).prop("checked",true); 
         //console.log($(this).val()); 
        } 
       }); 
      } 
     }); 
    }else{ 
     $(".flower").show(); 
    } 
});

來源

2016-12-30 RTX

99％是不相關的問題，因此很多讀者會忽略所有這一切。請創建一個[最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve），顯示您的問題。 –

我認爲這段代碼很好地說明了我的問題，如果你不明白，那很抱歉。 – RTX

你能想出一個*小*的代碼片段來說明你的問題嗎？ –

[編輯]更新您的JS搜索輸入處理程序如下：

$("#searchFlowerNames").on("input",function(){ 
    var searchInput = $(this).val().toLowerCase(); 
    $("input[name='fl-colour']").attr("checked",false); 
    $("input[name='fl-size']").attr("checked",false); 
    $("input[name='fl-cont']").attr("checked",false); 

    if(searchInput!=""){ 
     $(".flower").hide(); 
     var alerted = false; 
     var matchCount = 0; 
     $(".flower").each(function(){ 

      // We have a match. 
      if($(this).html().toLowerCase().indexOf(searchInput) != -1){ 
       $(this).show(); 
           matchCount = 1; 
       // To check the relevant checkboxes, have to get the category of this match. 
       var thisFlowerData = $(this).data("category").toLowerCase().split(" "); 
       //console.log(thisFlowerData); 

       // Set the flower color checkboxes 
       $("input[name='fl-colour']").each(function(){ 
        if(thisFlowerData.indexOf($(this).val().toLowerCase()) != -1){ 
         $(this).prop("checked",true); 
         //console.log($(this).val()); 
        } 
       }); 

       // Set the flower size checkboxes 
       $("input[name='fl-size']").each(function(){ 
        if(thisFlowerData.indexOf($(this).val().toLowerCase()) != -1){ 
         $(this).prop("checked",true); 
         //console.log($(this).val()); 
        } 
       }); 

       // Set the flower continent checkboxes 
       $("input[name='fl-cont']").each(function(){ 
        if(thisFlowerData.indexOf($(this).val().toLowerCase()) != -1){ 
         $(this).prop("checked",true); 
         //console.log($(this).val()); 
        } 
       }); 
      } 
     }); 
     if(matchCount === 0 && alerted === false){ 
      alert('no match'); 
      alerted = true; 
     } 
    }else{ 
     $(".flower").show(); 
    } 
});

工作的jsfiddle：

$filterCheckboxes.on('change', function() { 

var selectedFilters = {}; 

$filterCheckboxes.filter(':checked').each(function() { 

    if (!selectedFilters.hasOwnProperty(this.name)) { 
     selectedFilters[this.name] = []; 
    } 

    selectedFilters[this.name].push(this.value); 

}); 

// create a collection containing all of the filterable elements 
var $filteredResults = $('.flower'); 
// loop over the selected filter name -> (array) values pairs 
$.each(selectedFilters, function(name, filterValues) { 

    // filter each .flower element 
    $filteredResults = $filteredResults.filter(function() { 

     var matched = false, 
      currentFilterValues = $(this).data('category').split(' '); 

     // loop over each category value in the current .flower's data-category 
     $.each(currentFilterValues, function(_, currentFilterValue) { 

      // if the current category exists in the selected filters array 
      // set matched to true, and stop looping. as we're ORing in each 
      // set of filters, we only need to match once 

      if ($.inArray(currentFilterValue, filterValues) != -1) { 
       matched = true;    
       return false; 
      } else { 

      } 
     }); 

     // if matched is true the current .flower element is returned 
     return matched; 

    }); 
}); 

if($filteredResults.length === 0){ 
    alert('no match'); 
} 

$('.flower').hide().filter($filteredResults).show(); 

});

的jsfiddle：https://fiddle.jshell.net/cabeqaky/11/

[編輯] 的複選框過濾零匹配警報解決這個代碼的https://fiddle.jshell.net/cabeqaky/17/

來源

2016-12-30 21:32:12

不能使用 – RTX

已編輯，請重試。 –

你用我的更新/ jsfiddle再試一次嗎？ –

如何顯示報警時，沒有結果發現

回答

相關問題