J'essaie d'afficher du texte qui correspond à l'entrée utilisateur. Cela a fonctionné, mais il y a eu un problème qui m'a donné envie de faire apparaître une notification "NO COUNTRY FOUND". Si j'entre un mot sur l'entrée "AFGHANISTON" ou "ALGEZIA" ou autre. Ensuite, je veux que ce code fonctionne $("ul.suggestions").html('NO COUNTRY FOUND').

Alors, comment faire pour afficher la notification "NO COUNTRY FOUND", si le mot inséré ne correspond pas? Parce que si je me trompe en entrant un mot sur cette entrée, cela n'affiche qu'un vide

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>
1
Geryt Ginting 11 avril 2018 à 17:21

3 réponses

Meilleure réponse

Une fois la correspondance terminée, vous pouvez compter le nombre de li dans la liste et, s'ils sont nuls, vous pouvez définir le code HTML sur NO COUNTRY FOUND.

Voici une démonstration de travail:

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>
2
31piy 11 avril 2018 à 14:25

Si $ ("ul.suggestions"). Html () est vide après avoir parcouru tous les noms de pays, vous pouvez remplir le code HTML "Aucun pays trouvé" comme indiqué dans le code ci-dessous.

var selectValues = {
    "af": "AFGHANISTAN",
    "al": "ALBANIA",
    "dz": "ALGERIA"
};
$(document).on('onclick 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").html()=='')
		{
			$("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>
0
Seethapriyanka Peddada 11 avril 2018 à 14:49

Prenez une variable count et affectez-la à 0;

Maintenant, si vous trouvez du texte lors de la saisie , incrémentez le count variable

Vérifiez ensuite l'état,

 if(count == 0){
     $("ul.suggestions").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();
    var count = 0;
    if (tagValue.length > 0) {
        $("ul.suggestions").html('');
        $.each(selectValues, function(key, index) {
            if (this.indexOf(tagValue) > -1) {
                count  = count + 1;
                $("ul.suggestions").append('<li><a data="' + key + '">' + this + '</a></li>');
            }
        });
        if(count == 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>

Voici une DEMO de travail

0
Sravan 11 avril 2018 à 14:26