JQuery UI связан Combox / автозаполнение - PullRequest
0 голосов
/ 10 января 2012

Я использую модифицированную версию этого: http://jqueryui.com/demos/autocomplete/#combobox, которая использует AJAX для получения JSON вместо предварительно заполненного в select.У меня есть два из них like this

Поскольку я выбираю язык из и в, я не хочу, чтобы тот же язык появлялся в следующем автозаполнении.Как бы вы подошли к этому?



    (function( $ ) {
        $.widget("ui.combobox", {
            _create: function() {
                var self = this,
                    opts = this.options,
                    cbelement = this.element.hide(),
                    value = cbelement.val();
                var input = this.input = $("")
                    .insertAfter(cbelement)
                    .val(value)
                    .autocomplete({
                        delay: 0,
                        minLength: 0,
                        source: function(request, response) {
                            $.ajax({
                                url: opts.sourceUrl, type: "POST", dataType: "json",
                                data: { searchText: request.term },
                                success: function (data) {
                                    response($.map(data, function (item) {
                                        return {
                                            value: item.value,
                                            label: item.label,
                                        }
                                    }))
                                },
                            });
                        },
                        select: function(event, ui) {
                            $(this).val(ui.item.label);
                            $(opts.targetEl).val(ui.item.value);
                            return false;
                        }
                    })
                    .addClass("ui-widget ui-widget-content ui-corner-left required");

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

                this.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")
                    .addClass("ui-corner-right ui-button-icon")
                    .click(function() {
                        if ( input.autocomplete("widget").is(":visible")) {
                            input.autocomplete("close");
                            return;
                        }
                        $( this ).blur();
                        input.autocomplete("search", "");
                        input.focus();
                    });
            },
            destroy: function() {
                this.input.remove();
                this.button.remove();
                this.element.show();
                $.Widget.prototype.destroy.call( this );
            },
            options: {
                sourceUrl: '',
                targetEl: '',
                filter_selected: [],

            }
        });
    })(jQuery);

...