2015-11-19 64 views
0

我有一些问题设置自动填充表单(城市名称),我有响应JSON(检查在firebugs),但我不能让自动完成jquery ui工作。Symfony Ajax自动填充

下使用的文件:

“” 实体 - >产品及城 “”;

“” 表格 - > ProductsType和CityType “”

有关系OneToOne产品 - >市

从控制器请求:

/** 
* [citiesAction description] 
* 
* @Route("/vendre/{ville}", name="ville") 
* @Method("GET") 
*/ 
public function citiesAction(Request $request, $ville) 
{ 
     $em = $this->getDoctrine()->getManager(); 
     $cityName = $em->getRepository('ApxDevPagesBundle:City')->ajaxCity($ville); 

     if($cityName) 
     { 
      $cities = array(); 
      foreach($cityName as $city) 
      { 
       $cities[] = $city->getNomCommune(); 
      } 
     } else { 
      $city = null; 
     } 

     $response = new JsonResponse(); 

     return $response->setData(array('ville' => $cities)); 


} 

我的形式: (类名=> ville)

<label>{{'product_city'|trans|capitalize }}</label> 
         {{ form_widget(form.city) }} 

最后我的ajax:

$(".ville").autocomplete({ 
    source: function(request, response) { 
    $.ajax({ 
     url: 'http://ptijobs.dev/app_dev.php/vendre/' + $('.ville').val(), 
     dataType: "jsonp", 
     data: { 
     q: request.term 
     }, 
     success: function(data) { 
     response (data); 
     } 
    }); 
    } 
}); 

正如你可以看到我已经得到了响应:

See JSON response

任何指令,使其工作将真棒

回答

1
$(function() { 
function log(message) { 
    $("<div>").text(message).prependTo("#log"); 
    $("#log").scrollTop(0); 
} 

$(".ville").autocomplete({ 
    source: function(request, response) { 
    $.ajax({ 
     url: 'http://ptijobs.dev/app_dev.php/vendre/' + $(".ville").val(), 
     dataType: "json", 
     data: { 
     q: request.term 
     }, 
     success: function(data) { 
     response(data); 
     } 
    }); 
    }, 
    minLength: 3, 
    select: function(event, ui) { 
    log(ui.item ? 
     "Selected: " + ui.item.label : 
     "Nothing selected, input was " + this.value); 
    }, 
    open: function() { 
    $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
    }, 
    close: function() { 
    $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
    } 
}); 

});