Frage zu JQuery Autocomplete

T

Tiger2009

Mitglied
Hallo,

ich versuche gerade mit JQuery eine Autocompletefunktion umzusetzen.
Zuerst habe ich das mit Standardwerten gemacht:

Code: 
<html>
<head>		
	<title>
		<div lang=de>Test</div>
		<div lang=en>test</div>
	</title>
  <script src="/prototype/jquery/jquery-latest.js"></script>
  <link rel="stylesheet" href="/prototype/jquery/main.css" type="text/css">
  <link rel="stylesheet" href="/prototype/jquery/jquery.autocomplete.css" type="text/css">
  <script type="text/javascript" src="/prototype/jquery/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="/prototype/jquery/jquery.dimensions.js"></script>
  <script type="text/javascript" src="/prototype/jquery/jquery.autocomplete.js"></script>
  
  <script type="text/javascript">
    $(document).ready(function(){
       var data = "München Mailand Berlin".split(" ");
       $("#example").autocomplete(data);
    });
  </script>
</head>
<body>	
	Test: <input id="example" name="example" type="text" value=""> 
</body>
</html>

Das funktionierte so auch problemlos.
Nun hänge ich aber im nächsten Schritt. Die Auswahlmöglichkeiten sollen dynamisch vom Server befüllt werden. Dafür habe ich den JavaScript teil wie folgt angepasst:

Code: 
<script type="text/javascript">
  $(document).ready(function(){
	$("#example").autocomplete("testrequest?ACTION=getValues", {});	
  });  
  </script>

Hier hänge ich nun ...
Soviel ich herausgefunden habe muss in die geschweifte Klammer nun ein formatResult und ein parse Befehl.
Leider weiß ich nicht genau wie ich das umsetzen muss:

Der Server schickt auf testrequest eine html template welches wie folgt aufgebaut ist:
Code: 
<div id=results>
"Test1",
"Test2",
"Test3",
"Test4",
</div>

Wäre klasse wenn ihr mir bei der Erstellung der formatResult und parse Funktion helfen könntet.

Den aufbau des Requests kann ich selbst bestimmen. Falls es einfacher zu parsne ist kann ich da auch z.B. Wert1, Wert2, Wert3, ... nehmen

Viele Grüße
 
Eigentlich ist es in der Dokumentation sehr gut beschrieben. Dort sind sogar sehr viele Beispiele.

Javascript: 
$("#example").autocomplete({source: "testrequest?ACTION=getValues"});

und die Rückgabe könnte der Einfachheit so aussehen

Code: 
["Test1","Test2","Test3","Test4"]

Edit: Handelt es sich überhaupt um das offizielle jQuery UI autocomplete? Falls nicht, müsstest du natürlich schon erwähnen, welches Plugin du verwendest.
 
Zuletzt bearbeitet:
Hi,

es handelt sich um das hier:
http://docs.jquery.com/Plugins/Autocomplete/autocomplete
Denke das ist schon das offizielle.

Bin auch schon ein wenig weitergekommen.

Wenn ich folgenden Code verwende bekomme ich wenigstens schonmal alle Städte mit A angezeigt.

Code: 
	  $(document).ready(function(){				
				$("#example").autocomplete("testrequest?ACTION=getValues",                                                                                       {				
					  minChars: 1,
                       extraParams: {
					    'city': 'a'
					  }
         			});				
				
	  });

Mein Problem ist nun das es zwar so statisch geht wenn ich als Parameter 'city' : 'a'
angebe, aber eigentlich will ich hier ja nicht 'a' sondern den Inhalt des Input-Feld.

Eigentlich müsse das ja dann so gehen

Code: 
'city': $("#example").val()

Leider geht das nicht. Habt ihr eine Idee?
 
with a GET parameter named q that contains the current value of the input box
Zum Vergrößern anklicken....

Also benutze auf dem Server "q" und nicht "city".

Und falls du unbedingt "city" willst, dann verweise ich nochmal auf die Dokumentation

extraParams:
Extra parameters for the backend. If you were to specify { bar:4 }, the autocompleter would call my_autocomplete_backend.php?q=foo&bar=4 (assuming the input box contains "foo"). The param can be a function that is called to calculate the param before each request.
Zum Vergrößern anklicken....

Besonders der letzte Satz. Daraus folgt:

Javascript: 
$("#example").autocomplete("testrequest?ACTION=getValues", {              
    minChars: 1,
    extraParams: {
        'city': function() {
            return $("#example").val();
        }
    }
});
 
CPoly hat gesagt.:
Also benutze auf dem Server "q" und nicht "city".

Und falls du unbedingt "city" willst, dann verweise ich nochmal auf die Dokumentation



Besonders der letzte Satz. Daraus folgt:

Javascript: 
$("#example").autocomplete("testrequest?ACTION=getValues", {              
    minChars: 1,
    extraParams: {
        'city': function() {
            return $("#example").val();
        }
    }
});
Zum Vergrößern anklicken....

Danke so gehts!

Ich bin sooooooooooo blöd :)

Ich habe das schon auch so mit der function versucht aber anstatt von .val() habe ich .value() verwendet ;)
 
Ein kleines Problem habe ich noch. Mein Response-Template ist wie folgt aufgebaut:
Code: 
<div id="city">Aachen</div>
<div id="city">Augsburg</div>
<div id="city">Amsterdam</div>
...

Sobald ich ein Ergebniss auswähle übernimmt er mir jedoch die komplette Zeile in das Inputfeld.
Ich denke hierfür benötige ich nun die formatResult-Option

formatResult Function Default: Assumes either plain data to use as result or uses the same value as provided by formatItem.
Similar to formatItem, but provides the formatting for the value to be put into the input field. Again three arguments: Data, position (starting with one) and total number of data.
Zum Vergrößern anklicken....

Ich verstehe leider noch nicht genau wie ich die anzuwenden habe.
 
Zuletzt bearbeitet:
Ich tippe mal so:

Javascript: 
formatResult: function(data) {
    return data.replace('<div id="city">').replace('</div>');
}

Das ist aber sehr unschön. Du solltest es genau umgekehrt machen. Deine Rückgabe sollte auf jegliches HTML verzichten (bei autocomplete kommt es auf jedes byte an) und mittels formatItem dann das HTML hinzufügen. Denn im Moment sendest du bei jeder Eingabe redundant für jedes Element genau das gleiche Markup mit
 
CPoly hat gesagt.:
Ich tippe mal so:

Javascript: 
formatResult: function(data) {
    return data.replace('<div id="city">').replace('</div>');
}

Das ist aber sehr unschön. Du solltest es genau umgekehrt machen. Deine Rückgabe sollte auf jegliches HTML verzichten (bei autocomplete kommt es auf jedes byte an) und mittels formatItem dann das HTML hinzufügen. Denn im Moment sendest du bei jeder Eingabe redundant für jedes Element genau das gleiche Markup mit
Zum Vergrößern anklicken....

Ich kann leider nicht komplett auf HTML Verzichten da ich oben im Template ein Identifikation für die Sprache benötige. Aber das ist denke ich nicht so schlimm mein Response sieht nun wie folgt aus:

Code: 
<div lang="de"></div>
<div lang="en"></div>
["Aachen","Augsburg","Amsterdam"]

Das wäre die von dir gewünschte Struktur oder?

Nun muss ich mittles formatItem die Ergebniss definieren oder?
 
Tiger2009 hat gesagt.:
Das wäre die von dir gewünschte Struktur oder?
Zum Vergrößern anklicken....

Nein, da dachte ich noch, du würdest das jQuery UI autocomplete benutzen. Das hat meiner Meinung nach eine wesentlich bessere API als dieses Plugin. Ich hab nichtmal den Download Link gefunden und hab mir den Code aus dem Beispiel geholt...

Was hat es denn jetzt mit den ersten beiden Zeilen auf sich? Wozu brauchst du dort die lang Attribute? Das verstehe ich nicht ganz.
 
CPoly hat gesagt.:
Nein, da dachte ich noch, du würdest das jQuery UI autocomplete benutzen. Das hat meiner Meinung nach eine wesentlich bessere API als dieses Plugin. Ich hab nichtmal den Download Link gefunden und hab mir den Code aus dem Beispiel geholt...

Was hat es denn jetzt mit den ersten beiden Zeilen auf sich? Wozu brauchst du dort die lang Attribute? Das verstehe ich nicht ganz.
Zum Vergrößern anklicken....

Die 2 lang Attribute werden von der Servlet-Engine verwendet um die Templates auszuwerten.
Kenne mich damit leider nicht so gut aus da dieser Teil schon ein paar Jährchen alt ist :)
Wie auch immer.

Danke nochmals für die Hilfe. Habe das formatResult noch ein wenig anpassen müssen.
Aber nun funktioniert es wie gewünscht.

Code: 
formatResult: function(data) {    				
  return data.toString().replace('<div id="city">','').replace('</div>','');
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück