2014-01-14 76 views
0

我正在使用這個jQuery插件:JQuery Autocomplete。問題我收到了json數據,但沒有出現在自動完成列表中。 的JQuery代碼:JQuery自動完成與遠程JSON數據源不工作

$("#student-id").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
      url: "ajax/ajax_admin.php?auto_student=" + $("#student-id").val(), 
      dataType:"json", 
      data: { 
       featureClass: "P", 
       style: "full", 
       maxRows: 12, 
       name_startsWith: request.term 
      }, 
      success: function(data) { 
       response($.map(data.students, function(item) { 
        return { 
         label: item.id +" , "+ item.name, 
         value: item.id 
        } 
       })); 
      } 
     }); 
    }, 
    minLength: 2, 
    open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
    }, 
    close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
    } 
}); 

PHP Script是:

public function load_ajax_student_list($val) 
{ 
    $val = "%".$val."%"; 
    $stmt = $this->conn->prepare("select * from student where studentAiubId like :value limit 0,5"); 
    $stmt->bindValue(':value', $val); 
    $stmt->execute(); 
    if($stmt->rowCount() < 1) 
     echo ""; 
    else 
    { 
     $result = $stmt->fetchAll(); 

     $output = array(); 
     foreach($result as $row) 
     { 
      if($row['mname']=="") 
       $name = $row['fname']." ".$row['lname']; 
      else 
       $name = $row['fname']." ".$row['mname']." ".$row['lname']; 
      $data["name"] = $name; 
      $data["id"] = $row['studentAiubId']; 
      $output["students"][] = $data; 
     } 
     echo json_encode($output);     
    } 
} 

如果呼叫是這樣的:ajax/ajax_admin.php?auto_student=10
PHP script所產生的數據是:

{ 
    "students": [ 
     {"name":"Moh Mamun Sardar","id":"10-15987-1"}, 
     {"name":"Rehan Ahmed","id":"10-12451-2"}, 
     {"name":"Abid Hassan","id":"10-15412-1"}, 
     {"name":"Abir Islam","id":"10-11245-1"} 
    ] 
} 

,但沒有示出自動完成。我做錯了什麼?

+1

item.value必須是item.name或item.id。沒有字段叫做「返回json的值」 –

+0

我剛剛使用之前我發佈了這個。對不起這是我的錯。無論如何編輯 –

+0

。我也在使用它。沒有爲我工作。現在突然它正在工作。 :) –

回答

2

嘗試這樣的事情

$.map(data.students, function(item) { 
    return { 
    label: item.name, 
    value: item.id 
}); 

minlengthminLength看到外殼

+0

但在這裏在他們的網站上查看源代碼:http://jqueryui.com/autocomplete/#remote-jsonp-它的minLength –

+0

你可以在這裏通過改變套管看看它是否工作或不http:// jsfiddle .net/8khSs/1/ –

+0

@MamunSardar可能會在fiddle.net中出現問題 –

0

你已經忘記了 「appendTo」 屬性。在此屬性格式,你必須指定要被附加的信息,喜歡這個

appendTo: '.class' or appendTo: '#id' 

則必須將此屬性添加到自動完成初始化源和等的同級元素的選擇.. 。

相關問題