javascript - 如何在 jquery 中显示 “NO COUNTRY FOUND” 输入搜索？

Question

我正在尝试显示与用户输入匹配的文本。它有效，但有一个问题让我想弹出一个通知“找不到国家/地区”。如果我输入一个词就输入“AFGHANISTON”或“ALGEZIA”或其他。然后我希望此代码将运行 $("ul.suggestions").html('NO COUNTRY FOUND')。

那么，如果插入的单词不匹配，如何显示“NO COUNTRY FOUND”通知？因为如果我在该输入上输入了一个单词错误，它只会显示一个空白

var selectValues = {
    "af": "AFGHANISTAN",
    "al": "ALBANIA",
    "dz": "ALGERIA"
};
$(document).on('click keyup', '.country-tager', function(e) {
    var tagValue = $(this).val().toUpperCase();
    if (tagValue.length > 0) {
        $("ul.suggestions").html('');
        $.each(selectValues, function(key, index) {
            if (this.indexOf(tagValue) > -1) {
                $("ul.suggestions").append('<li><a data="' + key + '">' + this + '</a></li>');
            }
        });
    } else {
        $("ul.suggestions").html('please insert');
    }
    e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="country-tager country-search-input typeahead tag-field" autocomplete="off" type="text" placeholder="Search country">
<ul class="country-list suggestions"></ul>

Answer 1

匹配成功后，可以统计列表中li的个数，如果为零，可以将HTML设置为NO COUNTRY FOUND.

以下是一个工作演示:

var selectValues = {
    "af": "AFGHANISTAN",
    "al": "ALBANIA",
    "dz": "ALGERIA"
};
$(document).on('click keyup', '.country-tager', function(e) {
    var tagValue = $(this).val().toUpperCase();
    if (tagValue.length > 0) {
        $("ul.suggestions").html('');
        $.each(selectValues, function(key, index) {
            if (this.indexOf(tagValue) > -1) {
                $("ul.suggestions").append('<li><a data="' + key + '">' + this + '</a></li>');
            }
        });
        
        if ($('ul.suggestions li').length === 0) {
          $("ul.suggestions").html('NO COUNTRY FOUND');
        }
    } else {
        $("ul.suggestions").html('please insert');
    }
    e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="country-tager country-search-input typeahead tag-field" autocomplete="off" type="text" placeholder="Search country">
<ul class="country-list suggestions"></ul>