2012-02-28 88 views
4

我需要幫助,我看不出問題在哪裏。jquery UI自動完成ajax沒有填充下拉框

當我在html文件中設置自動完成的源代碼時,它工作正常,當我在ajax.php中打印出相同的源或數據庫值並通過ajax返回時它不起作用。可能是什麼問題呢?請幫助。

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> 

和我的ajax.php文件:

$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); 

這是從螢火蟲響應(來自數據庫生成)。

[{"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}] 

回答

6

參數response實際上是tthat你必須調用回調 - 傳遞你的數據 - 顯示結果彈出菜單。只需在「成功」回調中調用它即可:

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([]); 
     } 
    }); 
}, 
+0

嗨,謝謝,我簡直不敢相信我沒有看到。感謝您的幫助。 – user147 2012-02-28 12:40:39

+0

很高興幫助! :-) – 2012-02-28 12:41:34