如何在Jquery自动完成项目选择中将焦点设置为下一个输入

本文关键字:焦点 设置 输入 下一个 选择 项目 Jquery | 更新日期: 2023-09-27 18:24:48

我正在使用jquery自动完成,在从jquery自动完成中选择项目后无法将焦点设置在下一个输入框上,请帮助我解决此问题。

JavaScript

<script type="text/javascript">
        $(document).ready(function () {
            SearchText();
        });
        function SearchText() {
            $(".autosuggest").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Default.aspx/GetAutoCompleteData",
                        data: "{'username':'" + document.getElementById('txtSearch').value + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }
            });
        }
    </script>

如果下一个要聚焦的控件是

 <asp:TextBox ID="txtlocation" placeholder="Location" runat="server" Style="height: 30px;"
                                                class="span5"></asp:TextBox>

如何在Jquery自动完成项目选择中将焦点设置为下一个输入

尝试设置timeOut

$(document).ready(function () {
SearchText();
setTimeout(function () {
$('#txtSearch').next('input').focus();
}, 2000);
});

更新了答案,

为此,您需要一个名为关闭的事件

<script type="text/javascript">
        $(document).ready(function () {
            SearchText();
        });
        function SearchText() {
            $(".autosuggest").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Default.aspx/GetAutoCompleteData",
                        data: "{'username':'" + document.getElementById('txtSearch').value + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                },
              close: function (event, ui) {
                $('#txtlocation').focus();
              }
            });
        }
    </script>

演示:http://jsfiddle.net/2ocbta1k/1/

您应该将设置焦点添加到类似的选择事件中

<script type="text/javascript">
        $(document).ready(function () {
            SearchText();
        });
        function SearchText() {
            $(".autosuggest").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Default.aspx/GetAutoCompleteData",
                        data: "{'username':'" + document.getElementById('txtSearch').value + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                },
                close: function (event, ui) {
                    $('#txtlocation').focus();
                },
                select: function (event, ui) {
                    ($("#txtlocation")).focus();
                }
            });
        }
</script>