Autocomplete (jquery), UTF-8-Problem

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

  • Autocomplete (jquery), UTF-8-Problem

    Hi,

    es ist schon fast peinlich bei so einem bekannten Problem noch immer keine (gute) Lösung zu haben, aber ich dachte, ich wende mich mal an die Profis.
    Ich habe ein Minimalbeispiel mit jquery und dem autocomplete-plugin gebastelt, welches Städte aus einer Datenbank auslesen soll.

    Da ich noch mehr mit Ajax machen will, habe ich mir gedacht, ich kodiere meine Datenbank gleich auf uft-8 (utf8_unicode_ci).
    Hier meine kleinen Dateien:

    html

    Quellcode

    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    4. <head>
    5. <title>rent-a-jet</title>
    6. <script type="text/javascript" src="js/jquery.js"></script>
    7. <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
    8. </head>
    9. <body>
    10. <p><input id="autocomplete" type='text' /></p>
    11. <script type="text/javascript">
    12. function selectItem(li) {
    13. return false;
    14. }
    15. function formatItem(row) {
    16. return row[0];
    17. }
    18. $(document).ready(function() {
    19. $("#autocomplete").autocomplete("livesuche.php", {
    20. max:10,
    21. delay:10
    22. });
    23. });
    24. </script>
    25. </body>
    26. </html>
    Alles anzeigen


    php:

    Quellcode

    1. <?php
    2. /* livesuche.php - Ajax-Livesuche */
    3. require_once('inc/config.inc.php');
    4. require_once('classes/mysql.class.php');
    5. header('Content-type: text/html; charset="UTF-8"',true);
    6. $db =& new db_mysql($db_host, $db_user, $db_pass, $db_name);
    7. $q = $db->prepare(iconv("UTF-8", "ISO-8859-1", trim(strip_tags($_GET['q']))));
    8. $sql = "SELECT `name` FROM `cities` WHERE `name` LIKE '".$q."%' ";
    9. $res = $db->query($sql) or $db->raise_error("Livesuche fehlgeschlagen.");
    10. while($row = $db->fetch_array($res)){
    11. echo htmlentities($row['name'])."\n";
    12. }
    13. $db->close();
    14. ?>
    Alles anzeigen


    In der Datenbank stehen Werte wie "München" oder "Málaga". Diese sollen beim Suchen auch erfasst werden. Mit der aktuellen Lösung (Funktion iconv) ist das zwar der Fall, jedoch gibt es ein unbefriedigendes Ergebnis. Wenn ich Mü eingebe, wird das M markiert, das ü nicht mehr. Wenn ich das dann auswähle, steht im Eingabefeld M&uuml;nchen. Das ist natürlich sehr unschön anzusehen für den Benutzer.

    Ich suche nun die richtige Kombination von Zeichensätzen. Ich dachte, da ich alles auf utf-8 eingestellt habe, sollte es gehen. Das ist aber nicht wirklich der Fall.

    Danke im Voraus

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von mad ()

  • Zwei Sachen:

    1. Warum benutzt du iconv, wenn du auf der Webseite und in deiner Datenbank alles mit UTF-8 kodierst bzw. kodieren willst? Übrigens fehlt hier noch die sehr wichtige Meta-Angabe über den Charset-Typ:

      Quellcode

      1. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    2. Warum benutzt du htmlentites? Schon mal ohne probiert? Denn das seltsame M&uuml;nchen ist im Grunde nur die richtige Darstellung ohne ungültige Sonderzeichen zu benutzen. Also eigentlich das, was htmlentities ausgeben soll.
  • Hi,

    danke für die schnelle Antwort. Mein Editor speichert im ansi-Format, welches zum utf-8 kompatibel sein dürfte.
    Einstellungen in der php.ini zu machen, um eine richtige Zeichenkodierung zu erlangen, sehe ich als kritisch. Wenn es allerdings der einzige Weg ist, muss das wohl gemacht werden.
    Ich kann mir jedoch nicht vorstellen, dass man für eine Ajax-Einführung den Server neu konfigurieren muss.

    Vielleicht kennt ja jemand noch eine Lösung, die etwas sensibler mit dem Server umgeht...
  • Lemmi schrieb:

    Zwei Sachen:

    1. Warum benutzt du iconv, wenn du auf der Webseite und in deiner Datenbank alles mit UTF-8 kodierst bzw. kodieren willst? Übrigens fehlt hier noch die sehr wichtige Meta-Angabe über den Charset-Typ:

      Quellcode

      1. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    2. Warum benutzt du htmlentites? Schon mal ohne probiert? Denn das seltsame M&uuml;nchen ist im Grunde nur die richtige Darstellung ohne ungültige Sonderzeichen zu benutzen. Also eigentlich das, was htmlentities ausgeben soll.


    Zu 1. Ich benutze iconv nicht gern, aber das war die einzige Möglichkeit, dass Werte wie München o.ä. gefunden werden. Genau das will ich ja ändern, ich weiß nur nicht wie.
    Zu 2. Ich benutze htmlentities, weil München auch als München in der Auswahlliste angezeigt werden soll, ohne htmlentities ist dies nicht der Fall.

    Die Meta-Angabe habe ich ergänzt, jedoch hat das keine Auswirkungen.
    Danke trotzdem für die schnelle Antwort.
  • deaktiviert iconv auf jeden Fall zum testen wieder... das ist ja nicht Sinner der Sache ;) Die meta Angabe ist absolute Pflicht ;)

    Lass uns erstmal rausfinden ob das Problem nicht vielleicht doch die Datenbank ist.
    Füge mal selbst eine echo hinzu und prüfe ob das korrekt ist:

    Quellcode

    1. echo "Umläute\n";


    Btw: UTF-8 Artikel: easy-coding.de/wiki/php/utf-8-kodierung-sicherstellen.html
    Aber eigentlich nicht relevant für dich.
  • iconv hab ich jetzt entfernt. Meine Dateien sehen jetzt so aus:

    html

    Quellcode

    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    4. <head>
    5. <title>rent-a-jet</title>
    6. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    7. <script type="text/javascript" src="js/jquery.js"></script>
    8. <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
    9. </head>
    10. <body>
    11. <p><input id="autocomplete" type='text' /></p>
    12. <script type="text/javascript">
    13. function selectItem(li) {
    14. return false;
    15. }
    16. function formatItem(row) {
    17. return row[0];
    18. }
    19. $(document).ready(function() {
    20. $("#autocomplete").autocomplete("livesuche.php", {
    21. max:10,
    22. delay:10
    23. });
    24. });
    25. </script>
    26. </body>
    27. </html>
    Alles anzeigen


    php

    Quellcode

    1. <?php
    2. /* livesuche.php - Ajax-Livesuche */
    3. require_once('inc/config.inc.php');
    4. require_once('classes/mysql.class.php');
    5. header('Content-type: text/html; charset="UTF-8"',true);
    6. $db =& new db_mysql($db_host, $db_user, $db_pass, $db_name);
    7. $q = $db->prepare(trim(strip_tags($_GET['q'])));
    8. $sql = "SELECT `name` FROM `cities` WHERE `name` LIKE '".$q."%' ";
    9. $res = $db->query($sql) or $db->raise_error("Livesuche fehlgeschlagen.");
    10. while($row = $db->fetch_array($res)){
    11. echo htmlentities($row['name'])."\n";
    12. }
    13. echo "Umläute\n";
    14. $db->close();
    15. ?>
    Alles anzeigen


    Das ergibt zum Beispiel bei der Eingabe "I" (Istanbul, usw.) die AUsgabe im angehängten Bild.

    Danke für eure Hilfe!
    Bilder
    • problem.png

      10,2 kB, 273×252, 730 mal angesehen