jQuery Autosuggest Textfeld mit onChange Submit ?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • jQuery Autosuggest Textfeld mit onChange Submit ?

    Hallo zusammen,

    ich habe mit jQuery Autocomplete 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

    Quellcode

    1. <form action="" method="get" name="loc">
    2. <p>Ort suchen:
    3. <input onChange="this.form.submit()" type="text" id="suggestloc" />
    4. </p>
    5. <button value="submit">Suche</button>
    6. </form>
  • 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.

    Quellcode

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


    Das ist der jQuery Code:

    Quellcode

    1. $(".loc").change(function(){
    2. $(".loc").submit();
    3. });
  • 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:

    Quellcode

    1. <html>
    2. <head>
    3. <script type="text/javascript" src='../global_inc/jquery/lib/jquery-1.3.2.js'></script>
    4. <script type='text/javascript' src='../global_inc/jquery/lib/jquery.bgiframe.min.js'></script>
    5. <script type='text/javascript' src='../global_inc/jquery/jquery.autocomplete.js'></script>
    6. <link rel="stylesheet" type="text/css" href="../global_inc/jquery/main.css" />
    7. <link rel="stylesheet" type="text/css" href="../global_inc/jquery/jquery.autocomplete.css" />
    8. <script type="text/javascript">
    9. $().ready(function() {
    10. $("#suggestloc").autocomplete("../global_inc/jquery/search.php", {
    11. minChars: 1, scrollHeight: 200, max: 15, width: 190, mustMatch: true,
    12. });
    13. $("#suggestloc").result(function(event, data, formatted) {
    14. if (data) // Ortsname = data[0] ID = data[1]
    15. $(this).parent().next().find("input").val(data[1]);
    16. });
    17. $(".loc").change(function() {
    18. $(".loc").submit();
    19. });
    20. });
    21. </script>
    22. </head>
    23. <body>
    24. <div id="content">
    25. <form action="" method="get" name="loc" id="loc">
    26. <p>Ort suchen: <input type="text" id="suggestloc" /></p>
    27. <p><input type="hidden" name="loc" /></p>
    28. <button value="submit">Suche starten</button>
    29. </form>
    30. </div>
    31. </body>
    32. </html>
    Alles anzeigen
  • 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.

    Quellcode

    1. mustMatch: true, });

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

    Quellcode

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



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

    Vielleicht ganz intuitiv mit Callback? ^^

    Quellcode

    1. $("#suggestloc").autocomplete("../global_inc/jquery/search.php", {
    2. minChars: 1,
    3. scrollHeight: 200,
    4. max: 15,
    5. width: 190,
    6. mustMatch: true,
    7. callback: function(){
    8. /* Ajax Request */
    9. }
    10. });
  • 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 visualjquery.com .

    Habe jetzt die Sache wie folgt gelöst:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <script type="text/javascript" src='../global_inc/jquery/lib/jquery-1.3.2.js'></script>
    4. <script type='text/javascript' src='../global_inc/jquery/lib/jquery.bgiframe.min.js'></script>
    5. <script type='text/javascript' src='../global_inc/jquery/jquery.autocomplete.js'></script>
    6. <link rel="stylesheet" type="text/css" href="../global_inc/jquery/main.css" />
    7. <link rel="stylesheet" type="text/css" href="../global_inc/jquery/jquery.autocomplete.css" />
    8. <script type="text/javascript">
    9. $().ready(function() {
    10. $("#suggestloc").autocomplete("../global_inc/jquery/search.php", {
    11. minChars: 1, scrollHeight: 200, max: 15, width: 190, mustMatch: true
    12. });
    13. $(":input").result(function(event, data, formatted) {
    14. $(this).prev().search(); // Ortssuche in suggestloc
    15. if (data) $(this).parent().next().find("input").val(data[1]); // loc ID (hidden)
    16. if (data) $("#locform").submit();
    17. });
    18. });
    19. </script>
    20. </head>
    21. <body>
    22. <form action="" method="get" id="locform">
    23. <p>Ort Suche:<input type="text" id="suggestloc"/></p>
    24. <p><input type="hidden" name="loc"/></p>
    25. <button value="submit">Senden</button>
    26. </form>
    27. </body>
    28. </html>
    Alles anzeigen


    Danke nochmal und viele Grüße!
    Tommy

    PS: ja, stolpern fördert...