4
Autocomplete mit jQuery - wie hole ich die Daten "richtig" aus der Datenbank??
Hallo Gemeinde,
beimmVersuch, das Autocomplete in meine Webseite zu integrieren, bekomme ich nun bald graue Haare. Leider habe ich bisher auch noch kein Tutorial oder ein How-To hierzu gefunden, was mir weiterhelfen könnte und die API von jQuery ist mir einfach nicht schlüssig geworden.
Ich möchte in einem input-Feld Daten per Autocomplete vervollständigen lassen. Mit lokalen Daten in einer Javascript-Datei klappt das auch wunderbar, nur leider nicht mit der Remote-Variante. Ich hole die Daten, die ich benötige aus der Datenbank mittels eines PHP-Scripts "get_location.php" :
Wenn ich dieses Script über den Browser aufrufe, werden auch alle Einträge ausgegeben.
Mein Problem ist, dass das Script, in dem die Anweisungen für das Autocomplete stattfinden, anscheinend nicht die Daten in der richtigen Form zurückbekommt.
Der Code lautet bisher folgendermaßen:
Im Network des Browsers (Konsole von Chrome) wird die Query richtig abgeschickt (habe die erzeugte URL kopiert und in einem neuen Tab geöffnet und die Ergebnisse waren in Ordnung).
Es kommt also nicht das richtige wieder zurück. Als Fehler steht in der Konsole:
Uncaught TypeError: Cannot read property 'length' of undefined
Was läuft da nur falsch?
beimmVersuch, das Autocomplete in meine Webseite zu integrieren, bekomme ich nun bald graue Haare. Leider habe ich bisher auch noch kein Tutorial oder ein How-To hierzu gefunden, was mir weiterhelfen könnte und die API von jQuery ist mir einfach nicht schlüssig geworden.
Ich möchte in einem input-Feld Daten per Autocomplete vervollständigen lassen. Mit lokalen Daten in einer Javascript-Datei klappt das auch wunderbar, nur leider nicht mit der Remote-Variante. Ich hole die Daten, die ich benötige aus der Datenbank mittels eines PHP-Scripts "get_location.php" :
<?php
$res=db_query("SELECT `location_id` AS `id`,`location_name` FROM `event_location` WHERE `location_name` LIKE '%".mysql_real_escape_string($_REQUEST['query'])."%' ORDER BY `location_name`");
while($ret=db_fetch($res)){}
echo json_encode(array_filter($ret));
?>Wenn ich dieses Script über den Browser aufrufe, werden auch alle Einträge ausgegeben.
Mein Problem ist, dass das Script, in dem die Anweisungen für das Autocomplete stattfinden, anscheinend nicht die Daten in der richtigen Form zurückbekommt.
Der Code lautet bisher folgendermaßen:
$('#remote_input').autocomplete({
serviceUrl: '?site=get_location',
value: 'location_name',
title: 'id',
onSelect: function (suggestion) {
alert('Deine Wahl: ' + suggestion.value + ', ' + suggestion.title);
}
});Im Network des Browsers (Konsole von Chrome) wird die Query richtig abgeschickt (habe die erzeugte URL kopiert und in einem neuen Tab geöffnet und die Ergebnisse waren in Ordnung).
Es kommt also nicht das richtige wieder zurück. Als Fehler steht in der Konsole:
Uncaught TypeError: Cannot read property 'length' of undefined
Was läuft da nur falsch?
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 276177
Url: https://administrator.de/contentid/276177
Printed on: April 16, 2024 at 06:04 o'clock
4 Comments
Latest comment
Danke für deinen Hinweis, aber - nein - das ist es nicht, was ich suchte.
In dem Beispiel wird mit jQuery-ui gearbeitet,ich selbst arbeite zur Zeit nur mit jQuery.
Ich möchte letztendlich nicht nur den Namen der Location angezeigt bekommen, sondern ausserdem die ID des Datensatzes per POST weitergeben wiederum zum abspeichern in die Datenbank.
In dem Beispiel wird mit jQuery-ui gearbeitet,ich selbst arbeite zur Zeit nur mit jQuery.
Ich möchte letztendlich nicht nur den Namen der Location angezeigt bekommen, sondern ausserdem die ID des Datensatzes per POST weitergeben wiederum zum abspeichern in die Datenbank.
Zitat von @estebu:
Danke für deinen Hinweis, aber - nein - das ist es nicht, was ich suchte.
In dem Beispiel wird mit jQuery-ui gearbeitet,ich selbst arbeite zur Zeit nur mit jQuery.
Ich möchte letztendlich nicht nur den Namen der Location angezeigt bekommen, sondern ausserdem die ID des Datensatzes per
POST weitergeben wiederum zum abspeichern in die Datenbank.
Danke für deinen Hinweis, aber - nein - das ist es nicht, was ich suchte.
In dem Beispiel wird mit jQuery-ui gearbeitet,ich selbst arbeite zur Zeit nur mit jQuery.
Ich möchte letztendlich nicht nur den Namen der Location angezeigt bekommen, sondern ausserdem die ID des Datensatzes per
POST weitergeben wiederum zum abspeichern in die Datenbank.
Hallo @estebu,
ich denke, du wirst nicht umhin kommen, mit UI zu arbeiten. Alleine mit jquery gibts eine Fehlermeldung:
Gib doch mal hier JQuery autocomplete in die Suche ein: Da wird nämlich nichts gefunden
Hier JQeryUI hingegen schon
Wenn's unbedingt ohne UI sein soll, könntest du nach jeder Eingabe eines Buchstabens ins Input eine Funktion aufrufen,
die nach Abfrage einer Tabelle eine Liste mit den gefundenen Datensätzen füllt. Quasi ein AutoComplete "selbstgebastelt".
Jeder Listeneintrag bekommt dann einen Eventhandler zugewiesen,
welcher eine Funktion aufruft. In der Funktion kannst du mit dem Selbstverweis this auf den angeklickten Listeninhalt zugreifen und z.B.
in ein Formular eintragen.
Gruß
Günni
Script zur Sucheingabe und Tabellenabfrage
<!DOCTYPE HTML >
<html>
<head>
<title>Untitled</title>
<script src="jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function mein_autocomplete(){
/*
* Bestehende Liste löschen
*/
if($("#eingabe").val() == ""){
var element = document.getElementById("liste");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
return;
}
$.ajax({
/* Zielscript */
url: "a_1personensuche.php",
/* Das Suchfeld an data übergeben */
data: {suchen: $("#eingabe").val()},
/* Sendemethode */
type: "POST",
/* Funktionsaufruf */
success: function(data) { LoadData(data); }
});
}
/* Empfangene Daten in einer Liste ausgeben */
function LoadData(data) {
var response = $.parseJSON(data);
/*
* Bestehende Liste löschen
*/
var element = document.getElementById("liste");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
for(var i=0;i<response.length;i++){
var newLI = document.createElement("li");
var liNummer = response[i];
newLI.addEventListener ('click', Ausgabe, false);
var newLIText = document.createTextNode(liNummer + ";" + response[i][2] + ";" + response[i][1]);
document.getElementById("liste").appendChild(newLI);
document.getElementsByTagName("li")[i].appendChild(newLIText);
}
}
function Ausgabe(){
//alert(this.firstChild.data);
var data_arr = this.firstChild.data.split(";");
$("#id").val(data_arr);
$("#vorname").val(data_arr[1]);
$("#nachname").val(data_arr[2]);
}
// -->
</script>
</head>
<body>
<input id="eingabe" onkeyup="mein_autocomplete()" />
<ol id="liste" style="background-color: #d3d3d3;width:300px;">
</ol>
<form action="" method="post">
<p>ID <input type="text" id="id" /></p>
<p>Vorname <input type="text" id="vorname" /></p>
<p>Nachname <input type="text" id="nachname" /></p>
</form>
</body>
</html>Script "a_1personensuche.php" zur Tabellenabfrage
<?php
$name = $_POST["suchen"];
$conn = new PDO("mysql:host=localhost;dbname=test", "guenni", "guenni");
$query = "select id, Vorname, Nachname from tabelle2 where Nachname like '".$name."%'";
$stmt = $conn->prepare($query);
$stmt->execute();
$results = array();
while($result = $stmt->fetch(PDO::FETCH_ASSOC)){
$results = array($result['id'], $result['Vorname'], $result['Nachname']);
}
print_r(json_encode($results));
?>
Upps!! Kleiner Fehler in der Funktion.
Richtig ist . . .
function Ausgabe(){
//alert(this.firstChild.data);
var data_arr = this.firstChild.data.split(";");
$("#id").val(data_arr);
$("#vorname").val(data_arr[1]);
$("#nachname").val(data_arr[2]);
}Richtig ist . . .
function Ausgabe(){
. . .
$("#vorname").val(data_arr[2]);
$("#nachname").val(data_arr[1]);
}