Javascript 如何为单个元素设置jQuery组合框的minLength

如何在不影响其他元素的情况下为单个元素设置最小长度

编辑：

这是插件代码

(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: 300,
                        minLength: 2,
                        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 );

我应该把

$（“#tracklisting”）.autocomplete（“option”，“minLength”，0）放在哪里

设置长度。我试过很多东西，但都没有用

编辑： 这里是指向该项目的JSFIDLE链接。combox可以保留默认值，但combobox2的最小长度必须为0

jQuery UI中的.combobox（）小部件是对.autocomplete（）的修改，似乎没有那么多选项

但是从它的代码中，您可以注意到它会动态创建一个输入标记，您可以尝试再次对其应用.autocomplete（）方法。 输入放在旧的select标记后面的一个范围中，我使用.next（）来选择范围：

var myMinLength = 10;
$("#tracklisting").next().children("input").autocomplete({
                    delay: 0,

                    minLength: myMinLength ,

                    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;
                            }
                        }
                    }
                })

var myMinLength=10；
$（“#tracklisting”）.next（）.children（“输入”）.autocomplete({
延迟：0，
minLength:myMinLength，
来源：功能（请求、响应）{
var matcher=newregexp（$.ui.autocomplete.escapeRegex（request.term），“i”）；
响应（select.children（“option”）.map（函数（）{
var text=$（this.text（）；
if（this.value&（！request.term | | matcher.test（text）））
返回{
标签：text.replace(
新正则表达式(
（？！[^&；]+；）（？！）（？！[^&；]+；），“gi”
)“$1”，
值：文本，
选项：这个
};
}) );
},
选择：功能（事件、用户界面）{
ui.item.option.selected=true；
自触发（“选定”，事件{
项目：ui.item.option
});
},
更改：功能（事件、用户界面）{
如果（！ui.item）{
var matcher=new RegExp（“^”+$.ui.autocomplete.escapeRegex（$（this.val（））+“$”，“i”），
有效=错误；
select.children（“选项”）.each（函数（）{
if（$（this）.text（）.match（matcher））{
this.selected=valid=true；
返回false；
}
});
如果（！有效）{
//删除无效值，因为它与任何内容都不匹配
$（此）.val（“”）；
选择.val（“”）；
输入数据（“自动完成”）。术语=”；
返回false；
}
}
}
})

如果组合框在此之后中断，您还可以尝试添加以下行：

$("#tracklisting").next().children("input").addClass( "ui-widget ui-widget-content ui-corner-left" );

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

$（“#轨迹列表”）.next（）.children（“输入”）.addClass（“ui小部件ui小部件内容ui左角”）；
$（“#tracklisting”）.next（）.children（“输入”）.data（“自动完成”）。_renderItem=函数（ul，项）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+item.label+”）
.附录（ul）；
};

您是否尝试过：

$("#tracklisting").autocomplete({ minLength: 2 });

另见：

---

演示：

您在Combobox中使用哪个jquery插件？在JSFIDLE.net？@codef0rmer JqueryUI 1.8.22 ui组合框上创建一个工作演示。一个简单的插件，使html选择的外观和工作得更好。这里有一个链接到jqueryui网站上的确切内容。我的代码在javascrpit中与演示基本相同。我没有正确理解您的问题，您想实现什么？@codef0rmer我想更改minlength，但不在主插件代码中，因为这会更改所有的minlength。我只希望它出现在tracklisting元素上。我必须把它放在我的代码里的什么地方？我已经把它放在了我能想到的每一个可能的地方。我到底要把它放在哪里才能让它工作<代码>$（function（）{$（“#tracklisting”）.combobox（）；$（“#tracklisting”）.autocomplete（{minLength:0}）；}）检查上面的演示。希望这有帮助！如果你能给我看一个有2个选择和2个不同的最小长度工作的演示，那么我将永远是伟大的，因为我已经将你的演示更新到了我正在使用的组合框中。如果你能在这上面设定一个不同的minlegth，那么我们就开始做生意了。我试过了你所做的一切，但都没有用。我真的很感谢所有的帮助，到目前为止，我不知道你从哪里得到的小部件代码库，但我做了一点黑客。请注意，更改在第二个框中作为注释提及。

$("#tracklisting").autocomplete({ minLength: 2 });