javascript - Ajax AutoComplete autoFocus无法与.Focus一起使用

希望有人可以帮助我解决这个问题。当我单击自动完成附加到的输入文本框时，我希望自动完成列表显示为未过滤（在键入任何字符之前）。在我也将autoFocus事件添加到AutoComplete脚本之前，此方法工作正常。我需要自动对焦以选择列表中的第一个值。这是因为我希望选择一个选项，而不必从列表中进行选择。这是因为，如果用户键入整个字符串并且该字符串存在于列表中，则不会触发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");
    });
};

最佳答案

我设法解决了自己的问题，并认为应该将答案发布给其他遇到相同问题的人。

答案很简单。正如我可以看到autoFocus起作用了片刻，然后消失（取消选择），我知道是.Focus事件禁用了它，因为没有.Focus事件就可以工作。因此，我只是在.Focus事件中将AutoComplete的autoFocus选项定位，从而随后触发。这是修改后的代码。

// 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
        })
    });
};