All geek questions in one place

JQuery UI autocomplete ajax does not populate dropdown

I need help with this, I don’t see where the problem is.

When I set the autocomplete source in the html file, it works fine when the same source or database values ​​are printed in ajax.php and return it through ajax, this does not work. What could be the problem? Help me please.

Html:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Auto complete</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script> <link rel="stylesheet" media="all" type="text/css" href="jquery-ui-1.8.custom.css" /> <style type="text/css"> .ui-autocomplete-loading { background: url("images/loader.gif") no-repeat scroll right center white; } </style> <script type="text/javascript"> jQuery(document).ready(function($){ $("#ac").autocomplete({ minLength: 2, //source: [{"value":"Some Name","id":1},{"value":"Some Othername","id":2}] source: function( request, response){ $.ajax({ type: 'GET', url: 'ajax.php', data: { 'term':request.term }, contentType: "application/json; charset=utf-8", dataType: "json", success: function(data){ console.log('Success : ' + data); }, error: function(message){ alert(message); } }); }, select: function( event, ui ) { } }); }); </script> </head> <body> <input type="text" id="ac" name="ac" size="100" /> </body> </html>

and my ajax.php file:

 $dbhost = 'localhost'; $dbuser = 'root'; $dbpass = ''; $dbname = 'test_db'; $server = mysql_connect($dbhost, $dbuser, $dbpass); $connection = mysql_select_db($dbname, $server); $term = $_GET['term']; $qstring = "SELECT user_id,tName FROM `csv_data` WHERE tName LIKE '%" . $term . "%'"; $result = mysql_query($qstring); $return_arr = array(); $i = 0; while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {//loop through the retrieved values $row_a = array(); if ($row['tName'] != null) { $i++; $row_a['value'] = ($row['tName']); $row_a['id'] = (int) $i; array_push($return_arr, $row_a); } } mysql_close($server); header("Content-type: text/x-json"); /*$my_arr = array( array("value" => "Some Name", "id" => 1), array("value" => "Some Othername", "id" => 2) );*/ //echo json_encode($return_arr); print json_encode($return_arr); //print json_encode($my_arr);

This is a response from firebug (generated from the database).

 [{"value":"4 erste Spiele","id":1},{"value":"Meine ersten Spiele \"Blinde Kuh\"","id":2},{"value":"4 erste Spiele","id":3},{"value":"Meine ersten Spiele \"Blinde Kuh\"","id":4},{"value":"4 erste Spiele","id":5},{"value":"Meine ersten Spiele \"Blinde Kuh\"","id":6},{"value":"Maxi Kleine Spielewelt","id":7}]
+4
source share
1 answer

The response parameter is actually a callback that you must call - passing its data - to display a pop-up menu of results. Just name it in the success callback:

 source: function(request, response) { $.ajax({ ... success: function(data) { // pass your data to the response callback response(data); }, error: function(message) { // pass an empty array to close the menu if it was initially opened response([]); } }); },
+6
source

Source: https://habr.com/ru/post/1398809/

More articles:


All Articles