Last updated: 31/01/2012 1:09pm

New website!

Check out the new website for a new or updated article on this topic:
www.balbuss.com/autocomplete-with-jquery/

Autocomplete with jQuery UI

How it works - Example

04-08-2011
I keep working on this thing, the problem being that I want it to work in all situations. So: a new version...

The native Sapphire AutocompleteTextField is deprecated in SilverStripe version 2.4x. For some obscure reason it crept back into code in version 2.4.5, so I had to decide on another name for my solution, and decided to call it BalbusAutocompleteField. I've tested it on the Frontend, the CMS, the ComplexTableField and the DataObjectManager. It seems to work fine in most cases - only sometimes it conflicts with other modules that use their own jquery library versions.

Download here (balbusautocomplete.tar.gz)

Example creating the field:

 

$fields = new FieldSet(
	$auto = new BalbusAutocompleteField (
		'Test', 'Autocomplete testfield'
	)
);

Setting the source class and the source field

Setting the source class and the source field the suggestions should come from (defaults to SiteTree_Live, Title):

$fields = new FieldSet(
	$auto = new BalbusAutocompleteField (
		'Test', 'Autocomplete testfield'
	)
);

// set the source class and the source field
$auto->setSourceClass('SiteTree_Live');
$auto->setSourceField('Title');

Optional configuration settings:

Force the use of /sapphire/thirdparty/jquery/jquery-packed.js.
Use in the frontend to prevent the conflict with other code that loads jquery-packed.js:

...
// force the use of jquery-packed.js instead of jquery.js
$auto->forceJQueryPacked();

 

Enable caching (experimental)

...
// enable caching for the autocomplement field (default = false) 
$auto->setCaching(true);

 

Force the use of prototype initialization
Try this if the field doesn't work in the ComplexTableField

...
// force the use of prototype initialization
$auto->forcePrototype();

Altering style

Because this field loads it stylesheet from Google, it's not easy to change its styles. Adding the following to your layout.css may change the fontsize (that can sometimes be quite large for some reason):

.ui-autocomplete { font-size: 11px;}

 

10 Most recently updated pages

Post your comment

Comments

  • Thanks for your time so much for your impressive and amazing guide. I will not be reluctant to endorse your web sites to any individual who should receive direction on this problem. <a href="http://www.prcfrog.com">android phones</a>

    Posted by prcfrog, 30/10/2013 8:30am (9 months ago)

  • Great post however , I was wanting to know if you could write a litte more on this subject? I’d be very thankful if you could elaborate a little bit further. Bless you!

    Posted by prcfrog, 30/10/2013 8:29am (9 months ago)

  • Beautiful! I've been trying to add this functionality to a new SS site for days. I had your solution up and running is minutes. Thanks!

    Posted by Vance, 31/10/2011 2:33pm (3 years ago)

  • thx for that great stuff!

    Posted by Lassy, 29/03/2011 12:40pm (3 years ago)

RSS feed for comments on this page | RSS feed for all comments