Link to home
Start Free TrialLog in
Avatar of brihol44
brihol44

asked on

Jquery ui autocomplete: Having trouble with clicking element in autosuggest list and populating input field.

Hello, I'm having trouble with clicking a list element in autosuggest list and populating input field. It was working without the introduction to the top part (Highlighting) but i'm just not seeing what the issue is with that addition. Everything else is working perfectly.

(function( $ ) {
    // Custom autocomplete instance.
    $.widget( "app.autocomplete", $.ui.autocomplete, {

        // Which class get's applied to matched text in the menu items.
        options: {
            highlightClass: "ui-state-highlight"
        },

        _renderItem: function( ul, item ) {

            // Replace the matched text with a custom span. This
            // span uses the class found in the "highlightClass" option.
            var re = new RegExp( "(" + this.term + ")", "gi" ),
                cls = this.options.highlightClass,
                template = "<span class='" + cls + "'>$1</span>",
                label = item.label.replace( re, template ),
                $li = $( "<li/>" ).appendTo( ul );

            // Create and return the custom menu item content.
            $( "<a/>" ).attr( "href", "#" )
                       .html( label )
                       .appendTo( $li );

            return $li;

        }

    });

    // Create autocomplete instances.
    $(function() {

        $('.input-search').autocomplete({
            source: function(query, response) {
                $.ajax({
                    url: "app/func/func_search.cfc?method=search&returnformat=json",
                    dataType: "json",
                    data: {
                        searchPhrase: query.term
                    },
                    success: function(result) {
                    response(result);
                    },
                    select: function( event, ui ) {
                    log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
                    }
                });
            }
        });

      });

})( jQuery );

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of brihol44
brihol44

ASKER

Oh right! Thx