Autocomplete with jQuery UI

Autocomplete with jQuery UI

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

Comments

  • Wonderful, just made 3 edits to make it SS3 compatible:

    1. replace $this->Name with $this->getName

    2. replace $this->getTabIndex with $this->getAttribute("tabindex")

    3. edit the SQLQuery() with to read:
    $query = new SQLQuery();
    $query->setDistinct(true);
    $query->setSelect(array($sourceField));
    $query->setFrom( array($sourceClass) );
    $query->setWhere( array("`{$sourceField}` LIKE '{$term}%'") );
    $query->SetOrderBy( "{$sourceField} ASC" );

    Verstuurd door Michael, 13/08/2012 4:08pm (5 jaar geleden)

Het versturen van reacties is uitgeschakeld.

RSS feed voor reacties op deze pagina