使用 JQuery 自动完成组合框

发布于 2024-09-14 16:16:55 字数 1186 浏览 3 评论 0原文

我尝试在我的程序中使用此 JQuery 代码: http://jqueryui.com/demos/autocomplete/ #combobox

它基本上是一个组合框,有一个自动完成字段和一个下拉按钮。

当我尝试在表单标签内使用组合框时,它无法正常工作 - 当我只想查找值时,下拉按钮不断提交表单。

该示例的原始代码如下:

$( "<button>&nbsp;</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() {
                // 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();

            });

任何帮助表示赞赏:)。

Im trying to use this JQuery code in my program: http://jqueryui.com/demos/autocomplete/#combobox

Its basically a combo-box which has a auto-complete field and a dropdown button.

When I try to use my combo box inside form tags, it doesnt work properly - the dropdown button keeps submitting the form when i just want to look up values.

The original code from the example is the following:

$( "<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" )
            .addClass( "ui-corner-right ui-button-icon" )
            .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();

            });

Any help appreciated :).

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

蛮可爱 2024-09-21 16:16:55

我找到了解决方案,只需要做两个小改动:

.click(function() {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
    input.autocomplete("close");
    return false; // CHANGE 1
}
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
return false; // CHANGE 2
});

I found the solution, just need to make two small changes:

.click(function() {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
    input.autocomplete("close");
    return false; // CHANGE 1
}
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
return false; // CHANGE 2
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文