jQuery UI 1.8 autocomplete mit jQuery 1.6 – json

5

Da ich auch etwas suchen und probieren musste, möchte ich hier kurz meine Erfahrung teilen.

Was ist das Ziel ?

Mit jQuery 1.6 und jQuery UI 1.8 per JSON Daten per autocomplete Plugin auslesen und eine Textbox füllen.

Das problem war bei mir, das ich zwar ohne Probleme die Daten auslesen konnte soweit es die Beispiele im www hergeben und eine Textbox füllen konnte, allerdings wenn man dann z.B. sein Formular abschickt hat man den Wert der in der Textbox drin steht mit verschickt, meistens will man aber ja eher die ID die hinter dem Eintrag steckt, wenn die Daten aus einer DB kommen und da war erst mal die Herausforderung.

Ich habe für mich eine Lösung gefunden mit der ich sehr gut leben kann und die bei mir wunderbar funktioniert.

Fangen wir mit der Textbox an:

<input id="zipcode" type="text" name="zipcode" value="" />
<div id="bezirk"></div>
<input id="zipcode_id" type="hidden" name="zipcode_id" value="" />

Die normale sichtbare Textbox ist in dem Fall “zipcode“, in diesem Feld steht dann per autocomplete die Postleitzahl leserlich drin als 12345.
Darunter befindet sich das hidden field “zipcode_id“, in dem später die ID der jeweiligen Postleitzahl eingetragen wird.
Das Div mit der ID “Bezirk” ist nur in meinem Beispiel der jeweilige Bezirk zur Postleitzahl und nicht relevant für das Beispiel ;-)

Der nötige Javascript Code hierfür wäre:

	$j("#zipcode").autocomplete({
		source: function( request, response ) {				
			$j.ajax({
				url: "/autocomplete.php",
				dataType: "json",
				data: {						
					limit: 12,
					data: request.term
				},
				success: function( data ) {
					response( $j.map( data, function( item ) {
						return {
							label: item.postal_code + ", " + item.place_name,
							value: item.postal_code,					
							myid: item.id_zipcode,							
							bezirk: item.place_name							
						}
					}));
				}
			});
		},
		minLength: 2,
		select: function( event, ui ) {								
			$j('#zipcode_id').val(ui.item.myid);														
			$j('#bezirk').html(ui.item.bezirk);														
 
		},
		open: function() {
			$j( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
		},
		close: function() {
			$j( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			$j( this ).removeClass( "ui-autocomplete-loading" );
 
		}
	});

Oben sieht man nun folgendes:

	data: {						
			limit: 12,
			data: request.term,					
		},

Diese Daten werden per GET übergeben:

limit: ist in diesem Fall die Limitierung der zurückgegebenen Liste also es werden immer 12 Einträge angezeigt.
data: übergibt dann den eingegebenen Wert, der in der Textbox steht.

Der wichtige Teil um mehrere Daten zurück zu bekommen ist hier:

return {
	label: item.postal_code + ", " + item.place_name,
	value: item.postal_code,					
	myid: item.id_zipcode,							
	bezirk: item.place_name							
}

label: gibt das zurück was in der autocomplete Liste steht.
value: ist der Wert der in die Textbox geschrieben wird.
myid: ist die ID vom Datensatz, die ich eigentlich haben will.
bezirk: ist auch noch ein Wert den ich extra anzeigen möchte.

Es ist hier quasi möglich beliebig viele Werte zu erhalten.

Wenn nun ein Wert ausgewählt wird, kommt der folgende Part zum Einsatz:

select: function( event, ui ) {								
	$j('#zipcode_id').val(ui.item.myid);							
	$j('#bezirk').html(ui.item.bezirk);														
 
},

Jetzt kann man beliebig auf die Werte per ui.item.euerwert zugreifen und mit diesen Weiterarbeiten. In meinem Fall schreibe ich nun die ID des Datensatzes in das hidden field und darunter in das Div den Bezirk der Postleitzahl.

Damit beim Laden in der Textbox ein Ladesymbol angezeigt wird ist noch folgender CSS Eintrag nötig:

.ui-autocomplete-loading { background: white url('images/loading.gif') right center no-repeat; }

Die nötige PHP Datei für die JSON Rückgabe könnte dann so aussehen:

		$data = trim(strip_tags($_GET['data']));		
		$limit = trim(strip_tags($_GET['limit']));		
 
		$sql = "SELECT z.id_zipcode, z.postal_code, z.place_name
				FROM zipcodes z
				WHERE z.postal_code LIKE '$data%'				
				LIMIT $limit
			;"; 			
			$res = ...eure sql commands...		
 
			foreach ($res as $row)
			{				
				$ziplist[] = $row;
			}
			$ziparray = json_encode($ziplist);  			
			echo $ziparray;

ACHTUNG: Das ist nur Beispielcode, SQL Querys bitte vorher immer entsprechend prüfen !

Fertig sieht das dann ungefähr so aus:



und beim auswählen wird entsprechend der HTML Code verändert:

<div id="bezirk">Hamburg Marienthal</div>
<input id="zipcode_id" type="hidden" name="zipcode_id" value="1234" />
GD Star Rating
loading...
jQuery UI 1.8 autocomplete mit jQuery 1.6 - json, 9.0 out of 10 based on 1 rating

5 Antworten

  1. John sagt:

    Danke genau das habe ich mich bei jquery autocomplete gefragt ;-)

    GD Star Rating
    loading...
  2. Shivana sagt:

    Hi, blicke bei den code-schnipseln nicht durch.
    Könnte ich eine beispiel-programmierung inkl. dem jquery-Teil bekommen?

    GD Star Rating
    loading...
  3. dressa sagt:

    Leider wird nicht gezeigt wie die Ausgabe des PHP_File aussieht.(json-Array)

    Bin dieses Beispiel auf alle Wege am ausprobieren. Klappt aber nicht.

    GD Star Rating
    loading...
    • admin sagt:

      Hi,

      das Beispiel ist komplett, oben unter dem Punkt :

      “Die nötige PHP Datei für die JSON Rückgabe könnte dann so aussehen:”

      ist der php Code vorhanden ?

      Hier wird das Array zusammengebaut :

      $ziparray = json_encode($ziplist);
      echo $ziparray;

      …und zurückgegeben.

      GD Star Rating
      loading...

Hinterlasse einen Kommentar

© 2011 wwwundso. All rights reserved.