Top

Follow me and receive all the latest free scripts:

By Email:

Categories
Most Popular Posts

Symfony2 autocomplete tutorial

Symfony2 autocomplete tutorial

Published December 30, 2015 by , category Symfony 2

Symfony2AutocompleteAJAXjQuery

Symfony2 autocomplete field with jQuery and AJAX

Introduction

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="http://code.jquery.com/jquery-latest.min.js"></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.

CREATE TABLE IF NOT EXISTS `tc_countries` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `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.

Code

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.

Conclusion

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 (9 comments)

fakhri.ar 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')}}";

<script>
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
</script>
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
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).


ba
Problem!"
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
tuto_homepage:
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
Hi,
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
Hi

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 http://www.tipocode.com/symfony2/web/autocomplete
You have to copy paste in your pages.
Ion Vladescu Posted on November 30, 2016
Hello
great tutorial
can you please indicate at least where are location of all php files ?

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