Question

对于上一篇文章，我有一个自动完成下拉框，在用户从列表中选择一个项目后，我需要将代码发送到服务器端。我以为我可以使用select：function来做到这一点，但没有..任何帮助将不胜感激

CODE：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
<style type="text/css"> .ui-autocomplete { position: absolute; cursor: default; font-size:12px; font-family:Arial;} </style>
<script type="text/javascript">
    $(function () {
        $(".tb").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "EmployeeList.asmx/FetchEmailList",
                    data: "{ 'mail': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                value: item.Email
                            }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 3,
            select: function (event, ui) {
                $(".ImageButton1").click();
            }
        });
    });
</script>

Answer 1

自动完成构造函数的“source”属性定义了select对象的选项，而不是更改时发生的选项。你会想要这样的东西：

$(".tb").autocomplete({
  //This can be the result of a GET also
  //Or any function that returns a legitimate type for source
  source: ["your", "options", "here"] 
})

但是，要在用户选择某些内容时发布数据，您需要使用更改事件，如下所示：

$(".tb").change( function () {
  $.ajax({
                    url: "EmployeeList.asmx/FetchEmailList",
                    data: "{ 'mail': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                value: item.Email
                            }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
}

此脚本将事件处理程序附加到“更改”事件（每当用户使用您的选择窗口小部件时），该事件将发送结果（假设您已正确地将数据绑定到request.term）到服务器端端点：“EmployeeList的.asmx / FetchEmailList“

另外，请考虑使用

$(".tb").val()

如果您无法将术语数据绑定到request.term。

编辑：

似乎OP想要触发click事件或在不同的事件中发送ajax请求。

$(".tb").change( function () {
  //Manually fire a click event like this
  $(".ImageButton1").trigger("click");
})

当然，您需要在图像按钮的点击事件上附加一些代码才能执行此操作。

$("ImageButton1").click( function () {
  //Some code here, for instance your ajax request
  //This will fire on the change event of your select object also if you include the code in this example
});

Answer 2

就像我想的那样简单，语法：改变

select: function (event, ui) {
            $(".ImageButton1").click();

到

select: function () { $('#ImageButton1').click(); }

这很好用而且很简单（再次感谢）

jquery autofill on select：“按钮事件”

2 个答案: