在搜索中,如果没有匹配项,该选项将被隐藏,但是即使没有子选项匹配,optgroup仍会显示。如果没有匹配的选项,如何隐藏optgroup?
我已经尝试过处理此问题,这是我尝试过的代码:jsfiddle
$("#uniAddressSearch").on("keyup", function (){
var value = $(this).val().toLowerCase();
$("#u-address option").filter(function (){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
// &&
$("#u-address option").each(function() {
$(this).attr("data-search-term", $(this).text().toLowerCase());
});
$("#uniAddressSearch").on("keyup", function() {
var searchTerm = $(this).val().toLowerCase();
$("#u-address option").each(function() {
if ($(this).filter("[data-search-term *= " + searchTerm + "]").length > 0 || searchTerm.length < 1) {
$(this).show();
} else {
$(this).hide();
}
}); //end Option each
}); //end search
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="address-listing">
<input type="text" name="addressSearch" id="uniAddressSearch" placeholder="Select Location(s) Individually" class="form-control" />
</div>
<div class="u-address-fields">
<select size="15" multiple="multiple" class="show" id="u-address">
<optgroup class="og-swe" label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup class="og-ger" label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</optgroup>
<optgroup class="og-ita" label="Italian Cars">
<option value="ferrari">Ferrari</option>
<option value="lamborghini">Lamborghini</option>
</optgroup>
</select>
</div>
答案 0 :(得分:1)
您可以添加新条件来检查显示/隐藏的<option>
的长度。您可以为此维护一个计数器,它的工作原理就像您期望的那样:
$("#uniAddressSearch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#u-address option").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
$("#u-address option").each(function() {
$(this).attr("data-search-term", $(this).text().toLowerCase());
});
$("#uniAddressSearch").on("keyup", function() {
var searchTerm = $(this).val().toLowerCase();
var optionCount = $('#u-address option').length;
$("#u-address option").each(function() {
if ($(this).filter("[data-search-term *= " + searchTerm + "]").length > 0 || searchTerm.length < 1) {
$(this).show();
optionCount++;
$("#u-address").show();
} else {
$(this).hide();
optionCount--;
if(optionCount === 0){
$("#u-address").hide();
}
}
}); //end Option each
}); //end search
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="address-listing">
<input type="text" name="addressSearch" id="uniAddressSearch" placeholder="Select Location(s) Individually" class="form-control" />
</div>
<div class="u-address-fields">
<select size="15" multiple="multiple" class="show" id="u-address">
<optgroup class="og-swe" label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup class="og-ger" label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</optgroup>
<optgroup class="og-ita" label="Italian Cars">
<option value="ferrari">Ferrari</option>
<option value="lamborghini">Lamborghini</option>
</optgroup>
</select>
</div>
答案 1 :(得分:1)
更改这部分代码,
发件人:
$("#u-address option").each(function() {
if ($(this).filter("[data-search-term *= " + searchTerm + "]").length > 0 || searchTerm.length < 1) {
$(this).show();
} else {
$(this).hide();
} }); //end Option each
收件人:
$("#u-address optgroup").show();
$("#u-address option").each(function() {
if ($(this).filter("[data-search-term *= " + searchTerm + "]").length > 0 || searchTerm.length < 1) {
$(this).show();
} else {
$(this).hide();
var count = $(this).parent("optgroup").find("option:visible").length;
if(count == 0)
$(this).parent("optgroup").hide();
} }); //end Option each