Follow me and receive all the latest free scripts:

By Email:

Most Popular Posts

Symfony2 autocomplete tutorial

Symfony2 autocomplete tutorial

Published December 30, 2015 by , category Symfony 2


Symfony2 autocomplete field with jQuery and AJAX


In this tutorial I will show you how to add an autocomplete field. To illustrate my tutorial I chose a country table. So when you start typing at least two characters in the country field, a country list will appear below, showing countries which include your string.

This tutorial IS NOT about how to install and use Symfony2 framework. I consider you already know all the basic things and how to develop a website with Symfony2 step by step. I consider you know each of the major component pieces: Controllers, Routing, Doctrine, Forms...

Installing jQuery

With Symfony2 framework, you can work with any JavaScript library, so we will use a JavaScript framework, jQuery.

Simply include a link to jQuery framework somewhere in your layout:

<script type="text/javascript" src=""></script>

Or (if you host jQuery yourself):

<script src="{{ asset('bundles/tuto/js/jquery-1.10.1.min.js') }}"></script>

Live demo

Please visit the Symfony2 Ajax Lab to see a working demo.

Database structure sample

I use a country table called tc_countries with two fields: id, a standard auto increment field and name, a varchar field. Just insert some countries inside.

  `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci ;

Symfony2, create table from entity

Symfony2 offers you the possibility to create tables from entities. In the demo page, I provide you all the code, including the entity countries.php. So you may simply use doctrine command:
php app/console doctrine:database:create.


Please go to the demo page to get the full code, bundle name and structure.

For all the next Symfony2 tutorials the bundle name will be Sim100/TutoBundle.


Don't forget to adapt the code. I mean replace the Symfony2 namespace and uses if you don't use the same bundle name!

I hope you enjoy this tutorial. If you have questions, please post below.

About Simon Laroche
Simon Laroche on Google+
Simon Laroche on Twitter
Simon Laroche on Facebook
Simon Laroche on Pinterest
Simon Laroche on LinkedIn
: I am a Coder, Designer, Webmaster and Expert SEO Consulting, I'm also a wise traveller and an avid amateur photographer. I created the website TipoCode and many others such as Landolia: a World of Photos...

If you need help about this script, please leave a comment below. I reply as much as I can depending of my time, you may also get help from others.
I also offer a paid support, if you are in the need to adapt or create a script...

Comments (11 comments)

Piortr Posted on December 09, 2017
Hi, great tutorial, and nicelly done.
Works great.

I was thinking how pass argument for triggering next ajax call to search city in selected country.

It has to be done somewhere in js around
$('#matchList li').on('click', function() { // When click on an element in the list
$('#myTextField').val($(this).text()); // Update the field with the new element

but how in $.ajax ({ on sucess: generate new route? ..

symfony noob Posted on May 10, 2017
what to put in the indexcontroller plz
and thx Posted on April 09, 2017

I show the route page "/ starratingsystem"
All data with success except the stars.
It shows me the bar of stars but its star with the message no rated yet
Simon Laroche
Simon Laroche Posted on February 26, 2017
@Holliver: yes obviously it goes to the autocomplete-countries.js as it returns "Problem!" so I think the URL is wrong. I mean it's correct but as you see it's :
url: ROOT_URL + "ajax/autocomplete/update/data"

So you MUST set up the ROOT_URL in the block javascripts
var ROOT_URL = "{{ url('tuto_homepage')}}";

var loader = "{{ asset('bundles/tuto/images/loader-small.gif') }}"; //link to the animated loader-small.gif
var ROOT_URL = "{{ url('tuto_homepage')}}"; //your root URL, used in autocomplete-countries.js file
And of course as I said previously, you MUST set up the tuto_homepage URL in routing.yml
And it should work like me.
Holliver Posted on February 25, 2017
Thanks, its better but now I have this problem:
"Please search for a country and select the one you want on the returning list (type at least 2 characters).

I think, but i I am not sure that comes from a wrong url in "url: "ajax/tuto-autocomplete.php", // call the php file ajax/tuto-autocomplete.php"
Simon Laroche
Simon Laroche Posted on February 25, 2017
@Holliver: yes I forgot to add the root in the routing.yml file
path: /
defaults: { _controller: Sim100TutoBundle:Index:index }

Should be ok, but in fact I think I don't use it in the program, so maybe just remove it :)
Holliver Posted on February 24, 2017
can you explain:
var ROOT_URL = "{{ url('tuto_homepage') }}

"Unable to generate a URL for the named route "tuto_homepage" as such route does not exist."
Jordan Posted on January 11, 2017

I have probleme with

var ROOT_URL = "{{ url('tuto_homepage') }}"

error is 500 Internal Server Error
Simon Laroche
Simon Laroche Posted on November 30, 2016
@Ion Vladescu: all files are here
You have to copy paste in your pages.
Ion Vladescu Posted on November 30, 2016
great tutorial
can you please indicate at least where are location of all php files ?

mostaelectron Posted on September 13, 2016
thanks great work.

the content of indexAction in AutocompleteController may be sufficient :
public function indexAction()
return $this->render('Sim100TutoBundle:Autocomplete:index.html.twig', array());