Symfony Ajax自动填充

Question

I am having some issue setting up autocomplete form (city name), i have got response JSON (checked in firebugs) but i can't make the autocompletion jquery ui working.

following file used :

""Entity -> Products and City"" ;

""Form -> ProductsType and CityType""

There is relation OneToOne Products -> City

The request from controller :

/**
 * [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));


}

And my form: (class name => ville)

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

And finally my 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 );
      }
    });
  }
});

As you can see i have got the response :

Any instruction to make it work will awesome

Answer 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" );
  }
});

});