views:

237

answers:

0

I am using a slightly modified version of the combobox jQuery widget. The problem I am having is that the mouse click doesn't work as I had expected. I want a mouseclick on the input to highlight the contents of the input. This doesn't bring focus to the input, like I wanted. Here is what I have:

   (function($) {
    $.widget("ui.combobox", {
        _create: function() {
            var self = this;
            var select = this.element.hide();
            var input = $("<input >")
                .insertAfter(select)
                .autocomplete({
                    source: function(request, response) {
                        var matcher = new RegExp(request.term, "i");
                        response(select.children("option").map(function() {
                            var text = $(this).text(); 
                            if (this.value && (!request.term || matcher.test(text) || matcher.test(this.value))) //I wanted to be able to search on the values in the text box as well.
                                return {
                                    id: this.value,
                                    label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                                    value: text
                                };
                        }));
                    },
                    delay: 0,
                    change: function(event, ui) {
                        if (!ui.item) {
                            // remove invalid value, as it didn't match anything
                            $(this).val("");
                            return false;
                        }
                        select.val(ui.item.id);
                        self._trigger("selected", event, {
                            item: select.find("[value='" + ui.item.id + "']")
                        });

                    },
                    minLength: 0,
                    focus: function(event, ui) {
                        $(this).select(); //This doesn't bring focus on a mouseclick like I would expect.
                    }
                })
                .addClass("ui-helper-reset ui-widget ui-widget-content");
            $("<button></button>")
            .attr("tabIndex", -1)
            .attr("title", "Show All Items")
            .insertAfter(input)
            .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            }).removeClass("ui-corner-all ui-state-default ui-button-icon-only")
            .addClass("ui-helper-reset ")
            .click(function() {
                // close if already visible
                if (input.autocomplete("widget").is(":visible")) {
                    input.autocomplete("close");
                    return;
                }
                // pass empty string as value to search for, displaying all results
                input.autocomplete("search", "");
                input.focus();input.select();
            });
        }
    });

})(jQuery);