jQuery UI链接了Combox / autocomplete

时间:2012-01-10 02:11:05

标签: jquery autocomplete combobox

我使用的是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 $("
  • ") .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);

    0 个答案:

    没有答案