Question

我有一个像这样的ASP.NET结构：

<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
<asp:TextBox ID="txtArea" runat="server"></asp:TextBox>

并尝试在两个字段上使用jQueryUI自动完成，这是我正在使用的javascript：

$(document).ready(function() {
    $('#<%= txtArea.ClientID %>').autocomplete({
        minLength: 3,
        search: function(event, ui) { alert($('#<%= txtCity.ClientID%>').val()); },
        source: "handlers/AreaLocator.ashx?loc=" + $('#<%= txtCity.ClientID%>').val(),
        select: function(event, ui) { alert('aa'); }
    });

    $('#<%= txtCity.ClientID %>').autocomplete({
        minLength: 3,
        source: "handlers/CityLocator.ashx",
        select: function(event, ui) {
            $('#<%= txtCity.ClientID%>').val(ui.item.city);
        }
    });

});

但在我在AreaLocator.ashx中的代码后面我无法获取loc querystring的值。令人惊讶的是，txtArea自动完成的搜索事件会显示在txtCity自动完成中选择的值。有谁建议我做错了什么？两个自动完成的顺序没有任何区别，并且没有跨浏览器问题。

由于

Answer 1

这不太有效，因为source选项中的选择器只会被评估一次。您有两种选择：

在服务器上将loc重命名为term。在这种情况下，您的JavaScript就是：

$('#<%= txtArea.ClientID %>').autocomplete({
    minLength: 3,
    search: function(event, ui) { alert($('#<%= txtArea.ClientID%>').val()); },
    source: "handlers/AreaLocator.ashx",
    select: function(event, ui) { alert('aa'); }
});

然后，在服务器上，您会查找term而不是loc。自动填充功能会将参数term添加到网址。

如果那是不可能的，或者您不想更改服务器端代码，则可以通过将函数传递给source选项来自行提出AJAX请求：

$('#<%= txtArea.ClientID %>').autocomplete({
    minLength: 3,
    search: function(event, ui) { alert($('#<%= txtArea.ClientID%>').val()); },
    source: function (request, response) {
        $.ajax({
            url: "handlers/AreaLocator.ashx",
            data: { loc: $('#<%= txtCity.ClientID%>').val() },
            dataType: "json",
            success: response,
            error: function() {
                response([]);
            }
        });                
    }
    select: function(event, ui) { alert('aa'); }
});

至于你的另一个问题：

令人惊讶的是，txtArea自动填充的搜索事件显示了在txtCity自动完成中选择的值。

这只是因为您在txtArea自动填充搜索事件中有拼写错误。

alert($('#<%= txtCity.ClientID%>').val());

应该是：

alert($('#<%= txtArea.ClientID%>').val());

jQueryUI自动完成更新的文本框字段无法正确响应

1 个答案: