通过 Javascript 强制 AutoCompleteExtender 下拉列表重新显示

发布于 2024-09-28 05:21:14 字数 1265 浏览 3 评论 0原文

我有一个附加到文本框的 AjaxControlToolkit.AutoCompleteExtender 控件和三个单选按钮。当用户选择单选按钮时，用于检索 AutoCompleteExtender 中列出的值的服务方法将发生更改，如下所示：

$("#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();
}

我想确保，如果用户在文本框中已存在文本时选择单选按钮，则列表显示基于新服务方法的自动完成值（就像用户单击单选按钮并然后在文本框中键入内容一样）。

我尝试过各种事件触发机制，例如：

var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 77;
$('#textbox').trigger(press);

...其中每一个...

$('#textbox').keydown();
$('#textbox').keypress();
$('#textbox').keyup();

甚至：

$('#textbox').get(0).value += 'm';

但似乎没有什么可以强制触发正确的事件，以使自动完成列表重新显示新的结果服务方法。我如何使用 Javascript 实现这一点？

编辑：我应该注意：jQuery 事件在上述每种情况下都正确触发，它们只是不会导致自动完成列表在出现时重新出现。我想我还没有找到自动完成扩展程序期望强制显示列表的正确事件组合。

原文

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.

分享到QQ

分享到微博

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

发布评论

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

梦里兽 2024-10-05 05:21:14

确保在 $(document).ready() 函数中绑定事件。以下正确运行

      <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>

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>

回复收藏 0 原文

~没有更多了~