✔ jQuery Autocomplete mit Detail abruf

Syc · 10. Januar 2013

Hallo zusammen,

da das hier mein erster Post ist, ganz kurz was zu mir

Mein Name ist Patrick (Syc) bin 23, komme aus Mannheim und mache derzeit eine duale Ausbildung zum IT Systemkaufmann mit "Fernstudium" zum IT-Systemintegrator.
Ich arbeite nun seit ca. 10 Jahren mit HTML, PHP und MySQL, muss allerdings zugeben, dass ich mich an JavaScript bisher noch nicht herangetraut habe. Da sich dieses nun ändern soll, möchte ich nun gerne meine Skripte mit JavaScript etwas erweitern.

Ich bin lernfähig, und versuche Google zu nutzen soweit es geht und die Infos nicht ganz so alt sind!

Ich habe mich nun mal an ein paar jQuery Funktionen herangewagt (, und habe mir mit Hilfe der Dokumentation auch schon einige Scrips basteln können.
Nun hänge ich allerdings an der Autocomplete Funktion mit Remote Daten.

http://jqueryui.com/autocomplete/#remote

Hier mal die relevanten Auszüge meines Codes:

autocomplete.php

PHP:

<script>
$(function() {
	function log( message ) {
	$( "<div>" ).text( message ).prependTo( "#log" );
	$( "#log" ).scrollTop( 0 );
	}
$( "#id10" ).autocomplete({
	source: "system/functions/auto_city.php",
	minLength: 0,
	select: function( event, ui ) {
	log( ui.item ?
	"Stadt " + ui.item.value + "Plz " + ui.item.state +  " Bundesland" + ui.item.state + "und hat " + ui.item.size + "Einwohner" :
	"Keine Auswahl getroffen! Aktuelle eingabe " + this.value );
		}
	});
});
</script>
...
...
...
<input type="text" class="city_form" value="" name="city" id="id10" autocomplete="off"/>
<div id="log" class="desc" ></div>

auto_city.php

PHP:

.. MySql Connect...
---------------------------
$term = mysql_real_escape_string($_REQUEST['term']);

$sql="SELECT id, name, plz, size, info, coa FROM city WHERE name LIKE '%".$term."%' ORDER BY name";
$result = mysql_query($sql) or die(mysq_error());

	while ($row = mysql_fetch_array($result,MYSQL_ASSOC)){
		$row['name'] = htmlentities(stripslashes($row['name']));
		$row['id'] = (int)$row['id'];
		$row['state'] = (int)$row['state'];
		$row['plz'] = (int)$row['plz'];
		$row['info'] = (int)$row['info'];
		$row['coa'] = (int)$row['coa'];
		$row_set[] = $row;
		}
	echo json_encode($row_set);

Soweit klappt das auch alles...
Allerdings gibt es da ein paar Kleinigkeiten die mich stören und zu denen ich keine Lösung finden kann.

1. Ausgabe bei der Suche nach z.B. der Stadt Köln erscheint die Info dazu wie folgt:

Code:

Stadt Köln Plz: 506xx Bundesland: NRW und hat 1.000.000 Einwohner"

Zwischen die einzelnen ausgaben sollte eig. ein Zeilenumbruch.. Allerdings helfen mi mir weder die br() Funktion, /, noch /n oder /n/r... Geht das so direkt in der Funktion einen Zeilenumbruch einzubauen?

Zwischenfrage

Kann ich in der Textausgabe der Funktion evtl. CSS benutzen?

2. Zusätzlich sollte in der ersten Zeile das Wappen der Stadt Köln angezeigt werden... hier hatte ich es mit Standard img src versucht, was aber ein großes Durcheinander mit / und \ brachte, das Setzen von "" '' mir nur den Pfad als Text ausgibt und dokument.write dafür sorgt das zwar der Pfad als Text angezeigt wird, dafür die Seite sonst leer bleibt

Kann mir jemand helfen?
Oder kennt jemand neben den üblichen Links (SelfHtml, php.de, tutorials.de, GOOGLE.de etc. ) noch einen hilfreichen Link?

Danke euch schon einmal vorab

tombe · 10. Januar 2013

Was passiert wenn du es so schreibst:

Javascript:

"Stadt " + ui.item.value + "<br />Plz " + ui.item.state +  "<br />Bundesland" + ui.item.state + "<br />und hat " + ui.item.size + "Einwohner"

Wie hast du das Wappen bzw. das img-Tag denn genau eingegeben? Hast du es zur Not mal mit einfachen anstatt doppelten Anführungszeichen versucht?

Syc · 10. Januar 2013

Hallo Tombe und danke für deine Antwort.

Wenn ich es so versuche bekomme ich folgende Ausgabe:

Code:

Stadt Köln<br />Plz: 506xx<br />Bundesland: NRW<br />und hat 1.000.000 Einwohner

also leider das alte Phänomen ^^

Das bild habe ich versucht mit standart "<img src="http://www.tutorials.de/javascript-ajax/...">" aufzrufen, mit php tag, verschiedenen variationen von " und '...
Leider blieb entweder die seite weiß, oder alles ab src=" wurde mir als Text bzw. auch der pfad mit folder/\file.png angezeigt.

tombe · 10. Januar 2013

Ich bin noch nicht wirklich so fit was jQuery angeht. Gib mir mal einen Tipp wo und wie im Moment der Text ausgegeben wird.

Ist das diese Codezeile:

Javascript:

log( ui.item ? "Stadt " + ui.item.value + "Plz " + ui.item.state +  " Bundesland" + ui.item.state + "und hat " + ui.item.size + "Einwohner" :
    "Keine Auswahl getroffen! Aktuelle eingabe " + this.value );

Syc · 10. Januar 2013

So sieht die Ausgabe aus: (habe den code der SQL-Abfrage etwas verändert, deswegen das "undefined")

Die suche erfolgt im div id10 und die ausgabe im div log

PHP:

<input type="text" class="city_form" value="" name="city" id="id10" autocomplete="off"/>
<div id="log" class="desc" ></div>

log() beinhaltet den Text der ausgegeben werden soll:

PHP:

log( ui.item ? "Stadt " + ui.item.value + "Plz " + ui.item.state +  " Bundesland" + ui.item.state + "und hat " + ui.item.size + "Einwohner" :
    "Keine Auswahl getroffen! Aktuelle eingabe " + this.value );

Habe mir mal wieder ein paar dinge angeschaut, und frage mich gerade ob dadurch das ich den Text durch das aufrufen der Funktion "log" ohne "return" eventuell der Grund dafür sein kann?

a) Wenn dem so sein könnte, kann ich da ein return einbauen, bzw wie müsste ich das umschreiben?
b) wäre es nicht einfacher dem <div id="id10"> ein onChange zu geben, das die Seite mit der Variable [STADT] neu geladen wird, um die Infos dann mit PHP anzeigen zu lassen?

tombe · 10. Januar 2013

Also was ich gefunden habe (und für dich vielleicht nicht neu ist) ist das man "formatierten" Code mit Hilfe von

Javascript:

var1 = "Köln";
var2 = "506xx";
var3 = "NRW";
$(this).html("Stadt " + var1 + "<br />Plz " + var2 +"<br />Bundesland " + var3);

angibt.

Kannst du das auf diese Art lösen?

Syc · 10. Januar 2013

Das prinzip klingt dabei recht logisch, und wäre eine alternative zu "b)" nur gerade blöde frage!?
Wo muss der Code ersetzt/eingefügt werden?

tombe · 10. Januar 2013

Also die Ausgabe erfolgt ja in dem DIV-Container mit id="log".

Javascript:

// Code bisher
log( ui.item ? "Stadt " + ui.item.value + "Plz " + ui.item.state +  " Bundesland" + ui.item.state + "und hat " + ui.item.size + "Einwohner" : "Keine Auswahl getroffen! Aktuelle eingabe " + this.value );

// als neuer Versuch dann so
$("#log").html(ui.item ? "Stadt " + ui.item.value + "Plz " + ui.item.state +  " Bundesland" + ui.item.state + "und hat " + ui.item.size + "Einwohner" : "Keine Auswahl getroffen! Aktuelle eingabe " + this.value);

Was ich da nur nicht weiß ob die IF-Anweisung innerhalb da Probleme macht. Zur Not das so:

Javascript:

ausgabe = ui.item ? "Stadt " + ui.item.value + "Plz " + ui.item.state +  " Bundesland" + ui.item.state + "und hat " + ui.item.size + "Einwohner" : "Keine Auswahl getroffen! Aktuelle eingabe " + this.value;
$("#log").html(ausgabe);

Syc · 11. Januar 2013

Hallo tombe, danke für die schnelle Antwort.
Ich habe das ganze nun angepasst (geänderte SQL Abfrage) und versucht…

Code:

PHP:

<script>
$(function() {
	function log( message ) {
	$( "<div>" ).text( message ).prependTo( "#log" );
	$( "#log" ).scrollTop( 0 );
	}
$( "#id10" ).autocomplete({
	source: "system/functions/auto_city.php",
	minLength: 0,
	select: function( event, ui ) {
	$("#log").html(ui.item ? "Stadt " + ui.item.value + "<br>ID: " + ui.item.id +  "<br> Größe: " + "<img src='system/skins/system/styles/images/demand/" + ui.item.size + ".png'>" : "Keine Auswahl getroffen! Aktuelle eingabe " + this.value);
		}
	});
});
</script>

Ergebnis:

Nun hab ich aber noch eine letzte Frage zu dem Thema

Ist es möglich den Code selbst zu verstecken bzw. den Code auszulagern?
Habe es mit

autocomplete.php

HTML:

<script type="text/javascript" src="folder/autocomplete.js"></script>

und
autocomplete.js

PHP:

// JavaScript Autocomplete

<script type="text/javascript" language="JavaScript">
<!--

$(function() {
	function log( message ) {
	$( "<div>" ).text( message ).prependTo( "#log" );
	$( "#log" ).scrollTop( 0 );
	}
$( "#id10" ).autocomplete({
	source: "system/functions/auto_city.php",
	minLength: 0,
	select: function( event, ui ) {
	$("#log").html(ui.item ? "Stadt " + ui.item.value + "<br>ID: " + ui.item.id +  "<br> Größe: " + "<img src='system/skins/system/styles/images/demand/" + ui.item.size + ".png'>" : "Keine Auswahl getroffen! Aktuelle eingabe " + this.value);
		}
	});
});

//-->
</script>

versucht... Da die Funktion selbst allerdings keinen Namen besitzt bin ich gerade Planlos -.-

bei dem Versuch etwas zu basteln, funktioniert leider das ganze script nicht mehr bzw. bei eingabe wird keine Abfrage ausgeführt

Deshalb eine warscheinlich Dummy frage... Wie geht das bei Funktion die keinen Namen haben und mit $(xxx beginnen?

Ziel ist es, das der Nutzer bei Aufruf des Quelltextes nicht sofort den Aufruf bzw. den hinterlegten Ausgabe-Text sieht.

tombe · 12. Januar 2013

Hätte da vielleicht auch eine Lösung.

Bisheriger jQuery Code:

Javascript:

$("xxx").click(function(){
    alert ("Ich werde durch jQuery ausgeführt.");
});

Wird so geändert:

Javascript:

<script language="javascript" type="text/javascript" src="unsichtbar.js"></script>
$("xxx").click(function(){
    unsichtbare_funktion();
});

Javascript:

function unsichtbare_funktion() {
    alert ("Ich werde durch jQuery ausgeführt.");
}

Soll heißen der Code wird aus den eigentlichen jQuery Funktionen herausgenommen und in eine Funktion in einer separaten JS-Datei ausgelagert.

Diese JS-Datei wird dann in die Seite geladen und in die jQuery Funktionen wird dann lediglich der Aufruf der entsprechenden (ausgelagerten Funktion) eingetragen.

✔ jQuery Autocomplete mit Detail abruf

Syc

Grünschnabel

tombe

Erfahrenes Mitglied

Syc

Grünschnabel

tombe

Erfahrenes Mitglied

Syc

Grünschnabel

tombe

Erfahrenes Mitglied

Syc

Grünschnabel

tombe

Erfahrenes Mitglied

Syc

Grünschnabel

tombe

Erfahrenes Mitglied

Neue Beiträge