Question

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

Answer 1

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

答案很简单。我可以看到autoFocus工作了一会然后就消失了（取消选择），我知道它是.Focus事件，因为没有.Focus事件就可以禁用它。因此，我只是在.Focus事件中为自动完成定位了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
        })
    });
};

Ajax自动完成autoFocus无法使用.Focus

1 个答案: