jQuery autosuggest-Beispiel

Brauche ich zur Umsetzung ein "autosuggest" - Funktion auf unserer Website, aber es muss re-Abfrage, die auf jeden Tastendruck nach einer bestimmten Anzahl von Schlüsseln (wie jeder Charakter nach 2 würde es brauchen, um die Abfrage wieder). Also das Ergebnis ist nicht eine Begrenzung der Suche. Zum Beispiel der autocomplete plugins, die ich gesehen habe arbeiten wie folgt:

[suchen für ein county]
1. Kunden-Typen 'CA' und das erste Ergebnis zurückgeben würde, 'Kanada', 'Kambodscha', 'Kamerun'
2. Kunden weiter zu geben, trifft 'M' die neuen Ergebnisse würden Abfrage in der nur die bestehenden 3 Ergebnisse (Folgen von 'nur ' Kambodscha' und 'Kamerun')

Brauche ich eine Lösung, das wäre das äquivalent von Abfragen meine Datenquelle auf jedem Tastenanschlag. Ich habe bereits die ajax-Aufruf zurückgeben, meine Ergebnisse auf der Grundlage der "typisiert" params. Zum Beispiel (im obigen Beispiel), würde es brauchen, um einen ajax-Aufruf übergeben 'ca' zuerst, und wenn der Kunde gehalten, die Eingabe vorbei 'kann' auf der 3 Charakter und so weiter.

Dank.

InformationsquelleAutor RUtt | 2010-05-25

  1. 1

    Den jQuery-UI-autocomplete-plugin wird tun, was Sie wollen.

    Sehen Sie sich diese demo http://jqueryui.com/demos/autocomplete/#remote-jsonp

    den code für die demo:

    $("#city").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function(data) {
                        response($.map(data.geonames, function(item) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name
                            }
                        }))
                    }
                })
            },
            minLength: 2,
            select: function(event, ui) {
                log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value);
            },
            open: function() {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function() {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");


}
        });

    Können Sie die download-generator die autocomplete-Beispiel. Als bonus AutoVervollständigen ist optisch anpassbare und Sie können wählen Sie eine themeroller bereit Thema, oder Bearbeiten und erstellen Sie Ihre eigenen.

    InformationsquelleAutor RedWolves

  2. 0

    jqueryui der AutoVervollständigen-sendet die vollständige Zeichenfolge jedes mal, so dass Sie tun können was Sie möchten. Sie können auch Bearbeiten Sie die Ereignisse speichern, die Letzte Suche in string und senden Sie dieses zusammen mit dem neuen Antrag, wenn das hat geholfen.

    Danke, ich werde schauen, dass jqueryui heute. Ich ursprünglich bestanden über Sie, denn die Bibliothek ist immer ein wenig schwer und wir ' ve wurde machen eine bewusste Anstrengung, um die Optimierung der Ladezeiten
    Gut, solange Sie binden können, um eine änderung oder Ereignis senden, die über 'query tracking' Idee würde noch funktionieren.

    InformationsquelleAutor Dan Heberden

Schreibe einen Kommentar