Force AutoCompleteExtender dropdown to redisplay via Javascript
I have an AjaxControlToolkit.AutoCompleteExtender control attached to a textbox, and three radio buttons. When the user selects a radio button, the service method used to retrieve the values listed in the AutoCompleteExtender is changed, as follows:
$("#radioButtonList input").click(function() {
var selectedValue = $(this).val();
if (selectedValue == 0) {
$find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod1');
}
else if (selectedValue == 1) {
$find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod2');
}
else if (selectedValue == 2) {
$find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod3');
}
$('#textbox').focus();
}
I want to ensure that, if the user selects a radio button when text is already present in the textbox, the list of autocomplete values based on the new service method is displayed (just as it would be if the user clicked the radio button and then typed into the textbox).
I have tried various event-firing mechanisms, such as this:
var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 77;
$('#textbox').trigger(press);
...each of these...
$('#textbox').keydown();
$('#textbox').keypress();
$('#textbox').keyup();
and even:
$('#textbox').get(0).value += 'm';
but nothing seems force the correct events to fire in order to make the autocomplete list re-display with the results of the new 开发者_运维问答service method. How can I make this happen using Javascript?
EDIT: I should note: the jQuery events are firing correctly in each of the above cases, they're just not causing the autocomplete list to reappear when they do. I figure I haven't yet struck the right combination of events that the autocompleteextender is expecting to force the list to appear.
Make sure that you bind your events in the $(document).ready() function. The following works correctly
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script>
$(document).ready(function(){
$("#radioButtonList input").change(function() {
var selectedValue = $(this).val();
if (selectedValue == 0) {
$find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod1');
}
else if (selectedValue == 1) {
$find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod2');
}
else if (selectedValue == 2) {
$find('autoCompleteExtender').set_serviceMethod('AutoCompleteExtenderMethod3');
}
//force click on text box
$('#textbox').click()
$('#textbox').focus();
});
//handle click event
$("#textbox").click(function(){
alert("textbox clicked")
//handle your refresh action for the textbox here
})
})
</script>
</head>
<body>
<input id="textbox" type="text" value="test">
<div id="radioButtonList">
<input type="radio" value="0">
<input type="radio" value="1">
<input type="radio" value="2">
</div>
</body>
</html>
加载中,请稍侯......
精彩评论