2015-11-19 69 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"); 
    } 
}); 

});