2014-01-14 59 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' 

则必须将此属性添加到自动完成初始化源和等的同级元素的选择.. 。

相关问题