jQuery Autosuggest Textfeld mit onChange Submit ?

Beginner

Monday, March 23rd 2009, 2:00am

jQuery Autosuggest Textfeld mit onChange Submit ?

Hallo zusammen,

ich habe mit jQuery Autocomplete http://docs.jquery.com/Plugins/Autocomplete ein simples Formular/Textfeld zur Ortssuche erstellt. Übergeben werden die Orstnamen und die dazugehörige ID. Per Submit (Klick auf Button) funktioniert alles prima (index.php?search=loc).

Nun möchte ich den "Submit Button" weglassen und die Orts-ID mit "onChange" direkt absenden, wenn der User direkt auf den Ortsnamen klickt. Der folgende Code mit "onChange" funktioniert auch in anderen Formularen, aber nicht mit jQuery Autocomplete (ohne "onChange" funktioniert es ja).

Ich bin für jeden Hinweis dankbar!
Tommy

	Source code
1 2 3 4 5 6	<form action="" method="get" name="loc"> <p>Ort suchen: <input onChange="this.form.submit()" type="text" id="suggestloc" /> </p> <button value="submit">Suche</button> </form>

vince

Master

Posts: 1,104

Monday, March 23rd 2009, 10:17am

Hi,

Für die Submit Methode habe ich deiner Form eine ID gegeben, da es auf die schnelle einfacher ist als mit dem name Attribut.

HTML Code

<form action="" method="get" name="loc" id="loc"> 
   <p>Ort suchen:
   <input type="text" id="suggestloc" />
   </p>
   <button value="submit">Suche</button>
</form>

Das ist der jQuery Code:

	JavaScript Code
1 2 3	$(".loc").change(function(){ $(".loc").submit(); });

tommy

Beginner

Posts: 3

Monday, March 23rd 2009, 4:13pm

Vielen Dank für die Hilfe! Leider funktioniert es noch nicht.

Auch hatte ich noch einen Denkfehler: Das Input Textfeld
hat ja nur die Ortsnamen. Um die ID zu übergeben brauche
ich noch ein Hidden Feld mit der ID des gewählten Ortes.

Habe leider keine zündende Idee, wie ich das hinbekomme.
Vermutlich müsste die "suggestloc" Funktion entsprechend
erweitert werden, da blicke ich aber offen gesagt noch
nicht richtig durch...

Beim Absenden per Submit Button funktioniert alles richtig.

Bin über jeden Denkanstoss dankbar!
Tommy

Hier nochmal der ganze Quellcode:

HTML Code

<html>
<head>
<script type="text/javascript" src='../global_inc/jquery/lib/jquery-1.3.2.js'></script>
<script type='text/javascript' src='../global_inc/jquery/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='../global_inc/jquery/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="../global_inc/jquery/main.css" />
<link rel="stylesheet" type="text/css" href="../global_inc/jquery/jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
	$("#suggestloc").autocomplete("../global_inc/jquery/search.php", {
	minChars: 1, scrollHeight: 200,	max: 15, width: 190, mustMatch: true,	
	});
	$("#suggestloc").result(function(event, data, formatted) { 
		if (data) 		  // Ortsname = data[0]  ID = data[1]
			$(this).parent().next().find("input").val(data[1]);
	});
	$(".loc").change(function() {
		$(".loc").submit(); 
	});
});
</script>
</head>
<body>
<div id="content">
	<form action="" method="get" name="loc" id="loc"> 
		<p>Ort suchen: <input type="text" id="suggestloc" /></p>
		<p><input type="hidden" name="loc" /></p>
		<button value="submit">Suche starten</button>
	</form>
</div>
</body>
</html>

vince

Master

Posts: 1,104

Wednesday, March 25th 2009, 9:34am

Wieso möchtest du bei einem Inputfeld die ID übermitteln?
Du löst das ganze mit Autocomplete, das ist schon klar, aber warum ermittelst du die ID nicht serverseitig mit php.

Wenn man deine Idee verfolgt, dass mit JavaScript zu lösen, dann kannst du die Callbackfunktion vom autocomplete nutzen.
Heisst, dass du in die Callbackfunktion einen Ajaxrequest einbaust, der zu dem Ortsnamen die entsprechende ID ermittelt und das Hiddenfeld befüllt.

Hier sind mir noch 2 Sachen aufgefallen:

Das "Komma" sollte zu einem Fehler führen.

	JavaScript Code
1	mustMatch: true, });

Und hier fehlt das "document". (Möglicherweise funktioniert auch diese Schreibweise, ist aber nicht besonders "schön".)

	JavaScript Code
1	$().ready(function() {

Ich habe es leider nicht gefunden mit welchem Parameter man die Callbackfunktion einbindet.

Vielleicht ganz intuitiv mit Callback?

JavaScript Code

$("#suggestloc").autocomplete("../global_inc/jquery/search.php", {
	minChars: 1, 
        scrollHeight: 200,	
        max: 15, 
        width: 190, 
        mustMatch: true,
        callback: function(){
        /* Ajax Request */
        }	
});

tommy

Beginner

Posts: 3

Thursday, March 26th 2009, 9:28pm

Problem gelöst!

Danke für Deinen Tip! Ich verstehe zwar einige Zusammenhänge noch nicht ganz,
aber über Ausprobieren kommt man manchmal auch zum Ziel! Eine tolle Hilfe für
jQuery war dabei http://visualjquery.com .

Habe jetzt die Sache wie folgt gelöst:

Source code

<html>
<head>
<script type="text/javascript" src='../global_inc/jquery/lib/jquery-1.3.2.js'></script>
<script type='text/javascript' src='../global_inc/jquery/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='../global_inc/jquery/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="../global_inc/jquery/main.css" />
<link rel="stylesheet" type="text/css" href="../global_inc/jquery/jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
	$("#suggestloc").autocomplete("../global_inc/jquery/search.php", {
	minChars: 1, scrollHeight: 200,	max: 15, width: 190, mustMatch: true	
	});
	$(":input").result(function(event, data, formatted) { 
		$(this).prev().search(); // Ortssuche in suggestloc
		if (data) $(this).parent().next().find("input").val(data[1]);	// loc ID (hidden)	
		if (data) $("#locform").submit(); 	
	});	
});
</script>
</head>
<body>
<form action="" method="get" id="locform"> 
	<p>Ort Suche:<input type="text" id="suggestloc"/></p>
	<p><input type="hidden" name="loc"/></p> 
	<button value="submit">Senden</button>
</form>
</body>
</html>

Danke nochmal und viele Grüße!
Tommy

PS: ja, stolpern fördert...