Problem mit jQuery Autocomplete

[Sirakov]

Morgen,

ich versuche das jQuery-Plugin Autocomplete zu integrieren, leider funktioniert es noch nicht. Hier den Code:

    $('#input').autocomplete(function(term) {
        var searchUrl = urlBase + 'tagging/autocomplete/?term=' + term;  
	$.getJSON(searchUrl, function(jsonData) {
	    test = jsonData;
            console.log(test);
        });
    });

Die Ausgabe von console.log lautet z.B.:

 ["EBE", "EBE1", "EBE2"]

Diese Daten werden über PHP mittels

echo json_encode($words);

ausgegeben. Allerdings wird mir nichts vorgeschlagen. Kann es daran liegen, dass die Daten nicht in der Form

{"0" : "EBE", "1" : "EBE1", "2" : "EBE2"}

da liegen?

 

[Sven Mintel]

Moin,

Der Autocompleter erwartet als 1. Argument entweder einen Array(so, wie du es in deinem Posting notiert hast), oder aber eine URL(das, was du brauchst.)

Du hast jedoch keines von Beidem, sondern eine Funktion ohne Rückgabewert.

Du musst also als 1. Argument nur die URL notieren.

Als Rückgabe wird kein JSON benötigt, sondern eine zeilenweise Auflistung der Einträge, wobei du dort getrennt durch ein | 2. Werte übermitteln kannst:

Der 1. ist in jedem Fall das, was in das Input übernommen wird(abgesehen von HTML-Tags zur Formatierung in der Dropdown-Liste)
Der 2. ist optional, dort kannst du einen value angeben, jener ist es, der beim Senden für das Input-Feld übertragen wird.

Wie so eine erwartete Rückgabe aussehen muss, kannst du hier sehen:
http://jquery.bassistance.de/autocomplete/demo/search.php?q=n&limit=10
(in den Quelltext schauen....da steht alles Zeile für Zeile).

Zugegeben...das ist nicht wirklich gut dokumentiert, was dort erwartet wird, und json wäre in der Tat etwas zeitgemässer

Es bestände auch die Möglichkeit, über einen eigenen Callback-Handler bspw. JSON zu Verarbeiten, soweit ich dort gelesen habe.

 

[SonMiko]

Hm ich habs auch so eingebaut wie es im JQuery Kochbuch steht (mal davon abgesehen dass O'Reilly keinen wirklich brauchbaren Hinweis zum Aufbau der PHP Datei gibt, hab ichs der Logik nachempfunden und eine Abfrage gestrickt). Das Lokale Array führt zum Erfolg wohingegen eine Source URL keine Ausgabe liefert. Auch der String den Du im Beispiel nennst scheint die Funktion nicht zu interessieren...

$("input[name=receiver]").autocomplete({
       source: "http://jquery.bassistance.de/autocomplete/demo/search.php"
    });

Die Abfrage:

_getReceiver.php?q=mi

Liefert folgendes Ergebnis:

michaela|michaela
miranda|miranda

Leider brachte auch dieser Beitrag keine Hilfe:
http://www.pengoworks.com/workshop/jquery/autocomplete_docs.txt

Ideen ?

 

[rd4eva]

...wohingegen eine Source URL keine Ausgabe liefert...source: "http://jquery.bassistance.de/autocomplete/demo/search.php"

Hinter autocomplete verbirgt sich im Endeffekt auch nur Ajax und diesem ist es nicht gestattet cross-Domain content zu laden.
Stichwort: Same origin Policy

O'Reilly keinen wirklich brauchbaren Hinweis zum Aufbau der PHP Datei gibt

Da gibts auch nicht viel zu beachten.
Die PHP-Datei nimmt einen Get-Parameter entgegen und durchsucht dann ein Array / Mysql / oder sonstwas und liefert die passenden Ergebnise zurück. Wichtig ist dabei nur das am Ende Jedes Ergebnis in einer eigenen Zeile steht.

 

[SonMiko]

Hallo,

ich weiss - ich habe aber leider auch mit der lokalen URL keinen Erfolg.

$("input[name=receiver]").autocomplete({
       source:"content/_getReceiver.php"
    });

PHP-Datei:

while($row = mysql_fetch_assoc($res)){
                    echo $row['value_1']."|".$row['value_2']."\n";
                }

Es geht leider nicht...
Hat jemand eine Idee?

By the way: In der Doku zur Methode steht dass sie den Rückgabewert als JSON erwartet - auch wenn mein Büchlein etwas anderes behauptet...

Liebe Grüße,

Mike

 

[rd4eva]

By the way: In der Doku zur Methode steht dass sie den Rückgabewert als JSON erwartet - auch wenn mein Büchlein etwas anderes behauptet...

Wo hast du das denn gelesen? Reden wir von dem selben autocomplete script?!

 

[SonMiko]

Nein ich spreche vom JQuery UI Autocomplete
http://docs.jquery.com/UI/Autocomplete

Any Ideas?

 

[Sven Mintel]

Moin,

evtl. habe ich etwas überlesen, aber eingangs beschäftigte sich dieses Thema halt mit
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

du aber verwendest http://docs.jquery.com/UI/Autocomplete

Das sind verschiedene Baustellen.
Das von dir verwendete Plugin erwartet die Daten in Array-Form, das hast du schon korrekt festgestellt,...du lieferst die Daten aber nicht in dieser Form, denn dies:

while($row = mysql_fetch_assoc($res)){
                    echo $row['value_1']."|".$row['value_2']."\n";
                }

...erzeugt Zweifels ohne die Daten in dem Format, wie es das Plugin von bassistance.de erfordert.

 

[SonMiko]

Hm das hatte ich befürchtet...
Mit JSON bin ich leider Null vertraut...
Doof nur dass das JQuery Kochbuch (bzw. sein Autor) auf Seite 256 behauptet es seie eine einfache Source Angabe als String möglich und nichts weiter - doch dem scheint wohl leider nicht so zu sein.

Für alle die also mit dem Jquery UI Autocomplete arbeiten möchten und auch festhängen habe ich diese lange Lösung:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

Wenn jemand doch einen wirklich einfachen Weg kennt der keinen großen Aufwand erfordert bin ich ganz Ohr.

Hier nochmal der Verweis zur Doku:
http://docs.jquery.com/UI/Autocomplete

 

[Sven Mintel]

Es sind da diverse Sachen möglich.

* an Array with local data
* a String, specifying a URL
* a Callback

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above.

The third variation, the callback, provides the most flexibility, and can be used to connect any data source to Autocomplete. The callback gets two arguments:

JSON ist halb so kompliziert.
Da du ja mit PHP arbeitest, brauchst du dort nur einen Array mit allen Strings erstellen, und ihn JSON-kodiert ausgeben. Dies geht sehr bequem per json_encode();

$strings=array('foo','bar','foobar');
die(json_encode($strings));