Ajax自动完成自动聚焦不工作与.focus

Ajax AutoComplete autoFocus not working with .Focus

本文关键字：工作 focus Ajax 聚焦更新时间：2023-09-26

希望有人能帮我解决这个问题。当我单击AutoComplete附加到的输入文本框时，我希望自动完成列表不加过滤地显示(在输入任何字符之前)。在我将autoFocus事件添加到AutoComplete脚本之前，这一切都很好。我需要autoFocus来选择列表中的第一个值。这是因为我想选择一个选项，而不必从列表中选择。这是因为如果用户键入整个字符串并且它存在于列表中，则不会触发select事件(如果未选中)，而select事件又不会检索AutoComplete列表中所选字符串的主键(我将其存储在一个隐藏字段中以供以后使用)。

我想指出的是，autoFocus确实在第一个记录上聚焦了大约半秒。

谢谢你事先的建议。

这是我的代码，抱歉，如果它是有点夸张，但认为最好发送原始代码。

var value = null;
function AutoCompleteList(TextBoxName, HiddenFieldName, ValueFieldName, PrimaryKeyFieldName, TableNameName) {
    $("input[id*= " + TextBoxName + "]").autocomplete({
        autoFocus: true,
        source: function (request, response) {
            $.ajax({
                url: "/Service.asmx/GetListItems",
                data: "{ 'max-height':'10', 'prefix': '" + request.term + "', 'ValueField':'" + ValueFieldName + "', 'PrimaryKeyField':'" + PrimaryKeyFieldName + "', 'TableName':'" + TableNameName + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('seperatoor')[0],
                            val: item.split('seperatoor')[1]
                        }
                    }))
                },

                error: function (response) {
                   // alert(response.responseText);
                },
                failure: function (response) {
                   // alert(response.responseText);
                }
            });
        },
        minLength: 0,
        select: function (e, i) {
            $("input[id*= " + TextBoxName + "]").trigger('change');
            $("input[id*= " + HiddenFieldName + "]").val(i.item.val);
            value = i.item.val
        }

    }).focus(function () {
        $(this).autocomplete("search");
    });
};

我设法解决了我自己的问题，我认为我应该把答案贴在这里，为其他人面临同样的问题。

答案很简单。当我看到自动对焦工作了一会儿就消失了(取消选择)，我知道是。focus事件禁用了它，因为它没有。focus事件也能工作。因此，我只是将AutoComplete的autoFocus选项定位在. focus事件中，从而在之后触发。这是修改后的代码。

// jQuery
var value = null;
function AutoCompleteList(TextBoxName, HiddenFieldName, ValueFieldName, PrimaryKeyFieldName, TableNameName) {
    $("input[id*= " + TextBoxName + "]").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Service.asmx/GetListItems",
                data: "{ 'max-height':'10', 'prefix': '" + request.term + "', 'ValueField':'" + ValueFieldName + "', 'PrimaryKeyField':'" + PrimaryKeyFieldName + "', 'TableName':'" + TableNameName + "'}",
                dataType: "json",
                type: "POST",
                //.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;} 
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('seperatoor')[0],
                            val: item.split('seperatoor')[1]
                        }
                    }))
                },
                error: function (response) {
                    // alert(response.responseText);
                },
                failure: function (response) {
                    // alert(response.responseText);
                }
            });
        },
        minLength: 0,
        select: function (e, i) {
            $("input[id*= " + TextBoxName + "]").trigger('change');
            $("input[id*= " + HiddenFieldName + "]").val(i.item.val);
            value = i.item.val
        }
    }).focus(function () {
        $(this).autocomplete("search");
        //I moved the autoFocus option to be triggered here (inside the .Focus event
        $("input[id*= " + TextBoxName + "]").autocomplete({
            autoFocus: true
        })
    });
};