web-dev-qa-db-fra.com

jQuery UI autocomplete- aucun message de résultat

J'essaie de faire apparaître le message "Aucun résultat" dans le menu déroulant s'il n'y a aucun résultat. Ainsi, par exemple, si je tape "ABCD" dans le champ de texte et qu'aucune entité ne correspond, le message "Aucun résultat". sera affiché.

Après avoir examiné, à travers stackoverflow, les différentes façons de réaliser cela et en avoir essayé quelques-unes, je ne parviens toujours pas à le faire fonctionner.

Comment puis-je ajouter un message "Aucun résultat" au menu déroulant si aucun résultat n'est trouvé?

jQuery:

    $element.autocomplete({
        source: function (request, response) {            
            $.ajax({
                url: thUrl + thQS,
                type: "get",
                dataType: "json",
                cache: false,
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        if (data.indexOf(item) === -1) {
                            return { label: "No Results." }
                        } else {
                            return {
                                label: item.Company + " (" + item.Symbol + ")",
                                value: item.Company
                            }
                        }
                    }));
                }
            });
        },
        minLength: that.options.minLength,
        select: function (event, ui) {
               reRenderGrid();
        }
    });

J'ai essayé d'ajouter une instruction if () avec ce qui suit, mais cela n'a pas fonctionné.

if (data.length === 0) {
    // Do logic for empty result.
}

Je peux écraser la première entrée avec le texte "Aucun résultat" si je fais ce qui suit ... 

if (data.indexOf(item) === 0) {
    return { 
        label: "No Results." 
}

... mais si je règle data.indexOf(item) === -1, rien ne s'affiche.

J'ai récemment essayé ce qui suit, et quand il n'y a pas de données, cela va dans la boucle, cependant, "Aucun résultat" n'est pas affiché dans le menu:

   success: function (data) {
        response($.map(data, function (item) {
            return {
                label: item.Company + " (" + item.Symbol + ")",
                value: item.Company
            }
        }));
        if (data.length === 0) {
            label: "No Results."
        }
    }

J'ai également essayé d'utiliser l'exemple ci-dessous d'Andrew Whitaker sans succès:

FIDDLE D'ANDREW WHITACKER: http://jsfiddle.net/J5rVP/128/

SOURCE: http://blog.andrewawhitaker.com/2012/10/08/jqueryui-autocomplete-1-9/

javascriptjqueryjquery-uiautocompletejquery-autocomplete
18
Keven

Modifiez la fonction comme ceci pour vérifier la longueur des données. 

success: function (data) {
    if(!data.length){
      var result = [
       {
       label: 'No matches found', 
       value: response.term
       }
     ];
       response(result);
     }
     else{
     // normal response
       response($.map(data, function (item) {
         return {
           label: item.CompanyName + " (" + item.SymbolName + ")",
           value: item.CompanyName
         }
       }));
      }
     }
16
neelmeg
       if (!ui.content.length) {
            var noResult = { value:"",label:"No results found" };
            ui.content.Push(noResult);
            //$("#message").text("No results found");
        }

Fiddle

http://jsfiddle.net/J5rVP/129/

Mettre à jour

Placez le code à la fin de votre configuration d’auto-complétion juste après select: function (event, ui) {..}

    ..........
    minLength: that.options.minLength,
    select: function (event, ui) {
           reRenderGrid();
    },   //HERE - make sure to add the comma after your select
    response: function(event, ui) {
        if (!ui.content.length) {
            var noResult = { value:"",label:"No results found" };
            ui.content.Push(noResult);
        }
    }
});
24
Trevor

Ma réponse est presque identique à @neelmeg et @Trever, mais j'ai ajouté une vérification supplémentaire afin que l'utilisateur ne puisse pas sélectionner le message "pas de résultat":

$(".my-textbox").autocomplete({
    minLength: 2,
    open: function () { $('.ui-autocomplete').css('z-index', 50); },
    source: function (request, response) {
        $.ajax({
            url: "/some-url",
            type: "POST",
            dataType: "json",
            data: { prefix: request.term, __RequestVerificationToken: token },
            success: function (data) {
                if (!data.length) {
                    var result = [{ label: "no results", value: response.term }];
                    response(result);
                }
                else {
                    response($.map(data, function (item) {
                        return { label: item.someLabel, value: item.someValue };
                    }))
                }
            }
        })
    },
    select: function (event, ui) {
        var label = ui.item.label;
            if (label === "no results") {
            // this prevents "no results" from being selected
            event.preventDefault();
        }
        else {
            /* do something with the selected result */
            var url = "some-url"
            window.location.href = url;
        }
    }
});
0
Hooman Bahreini

Pour moi la raison pour laquelle ces messages sont survenus était:

MISSING CSS FILES O JQUERY UI

ajoutant ainsi:

<link rel="stylesheet" href="jqueryui/themes/flick/jquery-ui.css" type="text/css" media="screen" />
<link rel="stylesheet" href="jqueryui/themes/flick/jquery.ui.theme.css" type="text/css" media="screen" />

résolu mon problème

0
andilabs