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...

Leave a comment

Comments (4 comments)

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());