gpt4 book ai didi

javascript - 如何在未找到结果时显示警报

转载 作者:行者123 更新时间:2023-12-03 05:20:37 26 4
gpt4 key购买 nike

我有这个代码: 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();
}
});

最佳答案

[编辑]更新您的 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: https://fiddle.jshell.net/cabeqaky/11/

[编辑] 复选框过滤零匹配警报的解决方案:

$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/17/

关于javascript - 如何在未找到结果时显示警报,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41402689/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com