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

时间:2014-09-27 04:42:38

标签: c# jquery asp.net jquery-autocomplete

我正在使用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>

3 个答案:

答案 0 :(得分:0)

尝试设置timeOut

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

答案 1 :(得分:0)

更新了答案,

为此目的,您需要一个名为close的事件

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

答案 2 :(得分:0)

您应该将设置焦点添加到像

这样的select事件中
<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>