wake-up-neo.net

jQuery UI autocomplete- Keine Ergebnisnachricht

Ich versuche, im Dropdown-Menü eine Meldung "Keine Ergebnisse" anzuzeigen, wenn keine Ergebnisse vorhanden sind. Wenn ich zum Beispiel "ABCD" in das Textfeld eingebe und es keine Entität gibt, die übereinstimmt, wird die Meldung "Keine Ergebnisse" angezeigt. wird Angezeigt werden.

Nachdem ich durch stackoverflow nach den verschiedenen Möglichkeiten gesucht und ein paar davon ausprobiert habe, kann ich immer noch nicht, dass es funktioniert.

Wie kann ich dem Dropdown-Menü die Meldung "No results" hinzufügen, wenn keine Ergebnisse gefunden werden?

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();
        }
    });

Ich habe versucht, eine if () - Anweisung mit folgendem hinzuzufügen, aber das hat nicht funktioniert.

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

Ich kann den ersten Eintrag mit dem Text "Kein Ergebnis" überschreiben, wenn ich Folgendes mache ... 

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

... aber wenn ich data.indexOf(item) === -1 eingestellt habe, wird nichts angezeigt.

Ich habe gerade vor kurzem folgendes versucht, und wenn keine Daten vorhanden sind, geht es in die Schleife, jedoch wird "No Results" nicht im Menü angezeigt:

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

Ich habe auch versucht, das folgende Beispiel von Andrew Whitaker ohne Erfolg zu verwenden:

ANDREW WHITACKERS FIDDLE: http://jsfiddle.net/J5rVP/128/

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

18
Keven

Ändern Sie die Funktion wie folgt, um die Datenlänge zu prüfen. 

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/

Update

Fügen Sie den Code am Ende Ihrer automatischen Vervollständigung nach select: function (event, ui) {..} ein.

    ..........
    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

Meine Antwort ist fast identisch mit @neelmeg und @Trever, aber ich habe eine zusätzliche Prüfung hinzugefügt, sodass der Benutzer die Meldung "Kein Ergebnis" nicht auswählen kann:

$(".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

Für mich war der Grund, warum diese Nachrichten vorkamen:

MISSING CSS FILES O JQUERY UI 

so hinzufügen:

<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" />

mein Problem gelöst

0
andilabs