estebu
Goto Top

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" :

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

Content-ID: 276177

Url: https://administrator.de/contentid/276177

Ausgedruckt am: 21.11.2024 um 23:11 Uhr

wiesi200
wiesi200 01.07.2015 um 21:42:28 Uhr
Goto Top
Hallo,

Schon mal das durchgearbeitet?
AutoComplete mit PHP MySQL jQuery jQueryUI JSON
estebu
estebu 01.07.2015 um 22:02:44 Uhr
Goto Top
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.
Guenni
Guenni 21.07.2015 aktualisiert um 21:31:45 Uhr
Goto Top
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.

Hallo @estebu,

ich denke, du wirst nicht umhin kommen, mit UI zu arbeiten. Alleine mit jquery gibts eine Fehlermeldung:

74ab6dfa231707cb49c72747a8fe598d

Gib doch mal hier JQuery autocomplete in die Suche ein: Da wird nämlich nichts gefunden face-sad

Hier JQeryUI hingegen schon face-smile


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));
?>
Guenni
Guenni 22.07.2015 um 10:41:59 Uhr
Goto Top
Upps!! Kleiner Fehler in der Funktion.


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]);  
}