Autocomplete (jquery), UTF-8-Problem

Professional

Friday, November 7th 2008, 8:15pm

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

HTML Code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>rent-a-jet</title>
 
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
  </head>
 
  <body>
 
    <p><input id="autocomplete" type='text' /></p>
 
    <script type="text/javascript">
    function selectItem(li) {
    	return false;
    }
    function formatItem(row) {
    	return row[0];
    }
    $(document).ready(function() {
    	$("#autocomplete").autocomplete("livesuche.php", {
    		max:10,
        delay:10 
    	});
    });
    </script>
  </body>
</html>

php:

PHP Quellcode

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

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ü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

This post has been edited 1 times, last edit by "mad" (Nov 7th 2008, 8:22pm)

student2312

Intermediate

Posts: 121

2

Friday, November 7th 2008, 8:22pm

Also ich hatte auch ein utf8 Problem, bei mir lag es zum einen daran, dass auf dem Server nicht utf-8 eingestellt war was man in der php.ini oder mit einer .htaccess regeln kann und zum anderen dass mein Webeditor die .php Dateien nicht mit utf-8 Zeichensatz gespeichert hat.

Details hier

Vielleicht ist bei dir ja Ähnliches der Fall.

Lemmi

Professional

Posts: 651

3

Friday, November 7th 2008, 8:28pm

Zwei Sachen:

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:

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

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

mad

Professional

Posts: 662

4

Friday, November 7th 2008, 8:29pm

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...

mad

Professional

Posts: 662

5

Friday, November 7th 2008, 8:34pm

Quoted from "Lemmi"
Zwei Sachen:
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:
HTML Code
1
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Warum benutzt du htmlentites? Schon mal ohne probiert? Denn das seltsame Mü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.

Torben Brodt

Administrator

Posts: 8,454

6

Friday, November 7th 2008, 11:37pm

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:

	PHP Quellcode
1	echo "Umläute\n";

Btw: UTF-8 Artikel: http://www.easy-coding.de/wiki/php/utf-8…herstellen.html
Aber eigentlich nicht relevant für dich.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

mad

Professional

Posts: 662

7

Saturday, November 8th 2008, 9:57am

iconv hab ich jetzt entfernt. Meine Dateien sehen jetzt so aus:

html

HTML Code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>rent-a-jet</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
  </head>
 
  <body>
 
    <p><input id="autocomplete" type='text' /></p>
 
    <script type="text/javascript">
    function selectItem(li) {
    	return false;
    }
    function formatItem(row) {
    	return row[0];
    }
    $(document).ready(function() {
    	$("#autocomplete").autocomplete("livesuche.php", {
    		max:10,
        delay:10 
    	});
    });
    </script>
  </body>
</html>

php

PHP Quellcode

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

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

Danke für eure Hilfe!

mad has attached the following image:

Torben Brodt

Administrator

Posts: 8,454

8

Saturday, November 8th 2008, 1:15pm

Die htmlentities musst du noch entfernen.
Ansonsten ist vom Code ist alles korrekt. Dann kann es nur noch am verwendeten Zeichensatz des Editor liegen.

Der Beweis: Mach jetzt mal ein

	PHP Quellcode
1	echo utf8_encode('Umläute');

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

mad

Professional

Posts: 662

9

Saturday, November 8th 2008, 4:01pm

Es liegt/lag tatsächlich am verwendeten Zeichensatz im Editor. Ich nutze den Weaverslave unter Windows. Der hat leider keine Unterstützung, was UTF-8 betrifft. Da es keine neue Version des Editors gibt/geben wird, werde ich wohl komplett umsteigen. Mal sehen, was sich da finden lässt.

Danke jedenfalls für die großartige, schnelle Hilfe.

cya

Lemmi

Professional

Posts: 651

10

Saturday, November 8th 2008, 4:12pm

Vielleicht hilft dir das ja beim Umstieg: http://www.eclipse.org/projects/project_…ectid=tools.pdt

mad

Professional

Posts: 662

11

Sunday, November 9th 2008, 6:07pm

Danke für den Tipp. Ich kenne PDT auch schon, habe allerdings bisher darauf verzichtet, weil es sehr schwergewichtig ist. Wenn ich mal schnell eine php-datei anpassen will, ist Weaverslave ideal.

Naja ich werde den Weaverslave gegen pspad für kleine schnelle Änderungen tauschen, für etwas größere Projekte werd ich PDT nutzen.

bye

Coder Forum