LmC LmC - 5 months ago 17
Javascript Question

jQuery UI Autocomplete - Modifcation Issues

Looking at jQuery UI auto complete: http://jqueryui.com/demos/autocomplete/ and changing it to meet my requirements, I'm coming across some issues.

If you look at the default list at the link provided one of the options is "ActionScript" and if you type "Sc" it suggests "ActionScript" which in my case isn't suitable.

I only want it to suggest "ActionScript" for example if the user types:

  • A

  • Ac

  • Act

  • Acti

  • Actio

  • Action

  • ActionS

  • ActionSc

  • ActionScr

  • ActionScri

  • ActionScrip

  • ActionScript

"ActionScript" is just an example but it gets the point across.

Looking at the suggest function within jQuery UI auto complete code:

_suggest: function( items ) {
var ul = this.menu.element
.zIndex( this.element.zIndex() + 1 );
this._renderMenu( ul, items );
// TODO refresh should check if the active item is still in the dom, removing the need for a manual deactivate

// size and position menu
ul.position( $.extend({
of: this.element
}, this.options.position ));

if ( this.options.autoFocus ) {
this.menu.next( new $.Event("mouseover") );

I can't seem to find the part the narrows down the selections. Can someone point me in the right direction? I'm using the most recent stable build.

function hackAutocomplete(){

    $.extend($.ui.autocomplete, {
        filter: function(array, term){
            var matcher = new RegExp("^" + term, "i");

            return $.grep(array, function(value){
                return matcher.test(value.label || value.value || value);


Found this code which solved it.