Fire DropDownList SelectedIndexChanged событие при использовании автозаполнения JQuery-UI

Question

Я бы хотел отправить сообщение на сервер, когда моя combobox изменяет значение (в идеале с вызовом AJAX на панели обновления - но по одной штуке одновременно). Я использую я использую jQuery UIAutoComplete Combobox и, к сожалению, он вмешивается в событие изменения, так как я не меняю ниспадающий список напрямую.

Я использую реализацию подробно here.

Вот некоторый выбор фрагментов пользовательского

HTML код тела

<span class="ui-widget"> 
    <asp:DropDownList ID="cboLang" runat="server" AutoPostBack="True"> 
     <asp:ListItem Value="ActionScript">ActionScript</asp:ListItem> 
     <asp:ListItem Value="AppleScript">AppleScript</asp:ListItem> 
     <asp:ListItem Value="Asp">Asp</asp:ListItem> 
    </asp:DropDownList> 
</span> 

автозаполнения Javascript

Это автозаполнения JS, что exexutes всякий раз, когда был сделан выбор. Он всегда будет работать функция _removeIfInvalid

this._on(this.input, { 
    autocompleteselect: function (event, ui) { 
     ui.item.option.selected = true; 
     this._trigger("select", event, { 
      item: ui.item.option 
     }); 
    }, 

    autocompletechange: "_removeIfInvalid" 
}); 

стороне сервера Код

Protected Sub cboLang_SelectedIndexChanged(sender As Object, e As EventArgs) _ 
     Handles cboLang.SelectedIndexChanged 
    'DO OTHER STUFF HERE 
    Dim alert = String.Format("alert('{0}');", "Hi") 
    ScriptManager.RegisterStartupScript(Me, Me.GetType, "DropDownChange", alert, True) 
End Sub 

Сгенерированный код

Когда ASP.NET отображает страницу с прикрепленным событие, он производит следующий код

<script type="text/javascript"> 
//<![CDATA[ 
var theForm = document.forms['ctl00']; 
if (!theForm) { 
    theForm = document.ctl00; 
} 
function __doPostBack(eventTarget, eventArgument) { 
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
     theForm.__EVENTTARGET.value = eventTarget; 
     theForm.__EVENTARGUMENT.value = eventArgument; 
    theForm.submit(); 
    } 
} 
//]]> 
</script> 

<select id="cboLang" onchange="javascript:setTimeout('__doPostBack(\'cboLang\',\'\')', 0)" 
    name="cboLang" style="display: none;"> 

Вопрос

Где я могу идти о внесении изменений, чтобы гарантировать, что с каждым обновлением на вход autcomplete, я могу вызвать событие сервера?

Answer 1

Есть несколько вещей, которые полезны для ответа на этот вопрос. Одним из них является взглянуть на JQuery-UI's own documentation на этой функции:

// Initialize the autocomplete with the select callback specified: 
$(".selector").autocomplete({ select: function(event, ui) {}}); 
// Bind an event listener to the autocompleteselect event: 
$(".selector").on("autocompleteselect", function(event, ui) {}); 

По сути, то, что должно произойти, это то, что нужно, чтобы сигнал обратного вызова, если выбран пункт (либо из меню или путем ввода и получить полное совпадение).

Мы можем сделать это путем изменения функциональных возможностей по умолчанию продемонстрированную на autocomplete странице:

this._on(this.input, { 
    autocompleteselect: function(event, ui) { 
    ui.item.option.selected = true; 
    this._trigger("select", event, { 
     item: ui.item.option 
    }); 
    }, 
    autocompletechange: "_removeIfInvalid" 
}); 

Этот код присоединяет listeneres на select и change событий и запускает встроенный определенные функции и функции _removeIfInvalid всякий раз, когда эти события огня (соответственно)

Реализуя следующие изменения мы можем сделать постбэк когда действительный выбор был сделан:

//attach listeners 
this._on(this.input, { 
    autocompleteselect: "_selectFromMenu", 
    autocompletechange: "_removeIfInvalid" 
}); 

будет вызываться в любое время элемент выбран из меню:

_selectFromMenu: function (event, ui) { 
    ui.item.option.selected = true; 
    this._trigger("select", event, { 
     item: ui.item.option 
    }); 
    __doPostBack('', ''); 
}, 

будет вызван в любое время текст меняется:

_removeIfInvalid: function (event, ui) { 

    // Selected an item, automatically valid, post back 
    if (ui.item) { 
    __doPostBack('', ''); 
    return; 
    } 

    // Search for a match (case-insensitive) 
    var value = this.input.val(), 
    valueLowerCase = value.toLowerCase(), 
    valid = false; 
    this.element.children("option").each(function() { 
     if ($(this).text().toLowerCase() === valueLowerCase) { 
     this.selected = valid = true; 
     return false; 
     } 
    }); 

    // Found a match, post back 
    if (valid) { 
    __doPostBack('', ''); 
    return; 
    } 

    // Remove invalid value... 

Вот jsfiddle с полным кодом изменяется, хотя __doPostBack закомментирован, потому что он ничего не обрабатывается

Несколько далее примечание:

• Я звоню __doPostBack, но я полагаться на этот метод быть доступным из-за обработки событий asp.net сгенерированный код.
• Чтобы инициализировать поле со списком, вы должны позвонить $("#combobox").combobox();. Удостоверьтесь, что все, что готовит эту операцию, все еще вызвано возвратом из сообщения назад, иначе функциональность не вернется. Это одно, что нужно проделать, если вы используете асинхронный код на панели обновления.

Answer 2

Вместо __doPostBack (this.element.attr ('name'), '');

if (this.element.attr('onchange') != undefined &&  this.element.attr('onchange').indexOf("__doPostBack") >= 0) 
         __doPostBack(this.element.attr('name'), '');