jQueryUI автозаполнения поле обновляется текстовое поле не реагирует правильно

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 autocomplete отображает мне значение, выбранное в автозаполнении txtCity. Кто-нибудь предлагает мне, что я делаю неправильно? Заказ как автоматического завершения не имеет никакого значения, так и нет проблемы с перекрестным браузером.

Благодаря

Answer 1

Это будет не совсем работа, потому что ваш селектор в опции source будет оцениваться только один раз. У вас есть два варианта:

1. Переименовать 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. Autocomplete добавит параметр term к URL-адресу.

2. Если это не возможно, или вы не хотите изменить код на стороне сервера, вы можете сделать свой AJAX просить себя, передавая функцию к source опции:

   $('#<%= 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 autocomplete отображает мне значение, выбранное в автозаполнении txtCity.

Это просто потому, что у вас есть опечатка в событии поиска автозаполнения txtArea.

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

должно быть:

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