0

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 :

See JSON response

Any instruction to make it work will awesome

1 Answer 1

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

});

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.