Question

I’m trying to implement the jQuery UI autocomplete combobox so it’s reusable in ASP.NET/C#.

I’ve had no issues using it with just the basic autocomplete, but when trying to use the combobox I’m getting confused.

I have a handler when returns key/value pairs in JSON.

I then want multiple comboboxes which retrieve different data. I only want one handler, so I was looking at passing a reference in the querystring of the control I’m working with via the source method.

The only example I’ve really found remotely to what I want is this, but it just doesn’t seem right to me, and it’s not reusable and there seems to be some duplicated code.

The example on the jQuery site is the below, but when changing the source to use a remote source, the combobox never fills.

    (function( $ ) {
    $.widget( "ui.combobox", {
        _create: function() {
            var input,
                self = this,
                select = this.element.hide(),
                selected = select.children( ":selected" ),
                value = selected.val() ? selected.text() : "",
                wrapper = this.wrapper = $( "<span>" )
                    .addClass( "ui-combobox" )
                    .insertAfter( select );

            input = $( "<input>" )
                .appendTo( wrapper )
                .val( value )
                .addClass( "ui-state-default ui-combobox-input" )
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: function( request, response ) {
                        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                        response( select.children( "option" ).map(function() {
                            var text = $( this ).text();
                            if ( this.value && ( !request.term || matcher.test(text) ) )
                                return {
                                    label: text.replace(
                                        new RegExp(
                                            "(?![^&;]+;)(?!<[^<>]*)(" +
                                            $.ui.autocomplete.escapeRegex(request.term) +
                                            ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                        ), "<strong>$1</strong>" ),
                                    value: text,
                                    option: this
                                };
                        }) );
                    },
                    select: function( event, ui ) {
                        ui.item.option.selected = true;
                        self._trigger( "selected", event, {
                            item: ui.item.option
                        });
                    },
                    change: function( event, ui ) {
                        if ( !ui.item ) {
                            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
                                valid = false;
                            select.children( "option" ).each(function() {
                                if ( $( this ).text().match( matcher ) ) {
                                    this.selected = valid = true;
                                    return false;
                                }
                            });
                            if ( !valid ) {
                                // remove invalid value, as it didn't match anything
                                $( this ).val( "" );
                                select.val( "" );
                                input.data( "autocomplete" ).term = "";
                                return false;
                            }
                        }
                    }
                })
                .addClass( "ui-widget ui-widget-content ui-corner-left" );

            input.data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + item.label + "</a>" )
                    .appendTo( ul );
            };

            $( "<a>" )
                .attr( "tabIndex", -1 )
                .attr( "title", "Show All Items" )
                .appendTo( wrapper )
                .button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                })
                .removeClass( "ui-corner-all" )
                .addClass( "ui-corner-right ui-combobox-toggle" )
                .click(function() {
                    // close if already visible
                    if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
                        input.autocomplete( "close" );
                        return;
                    }

                    // work around a bug (likely same cause as #5265)
                    $( this ).blur();

                    // pass empty string as value to search for, displaying all results
                    input.autocomplete( "search", "" );
                    input.focus();
                });
        },

        destroy: function() {
            this.wrapper.remove();
            this.element.show();
            $.Widget.prototype.destroy.call( this );
        }
    });
})( jQuery );

$(function() {
    $( "#combobox" ).combobox();
    $( "#toggle" ).click(function() {
        $( "#combobox" ).toggle();
    });
});

Ideally, at this stage: $( "#combobox" ).combobox(); I want to specify my remote data source, but when trying that, i.e $( "#combobox" ).combobox( { source: "handler.ashx" } ); the combobox never fills. Only if I edit the autocomplete section above and remove all the regex code can I get it to work, but then how do I reference the current combobox I’m in to get it’s value? I’m really confused, this must be simple and I’m overcomplicating things… Any help, please?!

Answer 1

The combobox demo is basically meant to enhance an existing <select> element on the page. As such, it’s not really suited for a remote data source. You can cut out a lot of the example code if all you want is a styled input with a button:

(function ($) {
    $.widget("ui.combobox", {
        _create: function() {
            var wrapper = this.wrapper = $("<span />").addClass("ui-combobox")
                , self = this;

            this.element.wrap(wrapper);

            this.element
                .addClass("ui-state-default ui-combobox-input ui-widget ui-widget-content ui-corner-left")
                .autocomplete($.extend({
                    minLength: 0
                }, this.options));

            $("<a />")
                .insertAfter(this.element)
                .button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                })
                .removeClass("ui-corner-all")
                .addClass("ui-corner-right ui-combobox-toggle")
                .click(function () {
                    if (self.element.autocomplete("widget" ).is(":visible")) {
                        self.element.autocomplete("close");
                        return;
                    }

                    $(this).blur();

                    self.element.autocomplete("search", "");
                    self.element.focus();
                });
        },

        destroy: function() {
            this.wrapper.remove();
            $.Widget.prototype.destroy.call(this);
        }
    });
})(jQuery);

Usage:

$(function() {
    $("#combo").combobox({
        source: 'my_source'
    });
});​

Example: http://jsfiddle.net/4extL/45/

The other route you could go is create a partial view that contains the generated HTML, and just apply the autocomplete widget normally. The downside with this is that it doesn’t gracefully degrade like the jQuery plugin does.