javascript - 无法在 jquery 自动完成中获取文本框的值

Question

我正在使用 jquery 1.9.1.js 和 jquery-ui-1.10.3.custom.min.js。我在 IE9 浏览器上运行时出现错误 “无法获取属性 'toLowerCase' 的值:对象为 null 或未定义”。下面是我的代码。

  $("input[id^='TextBoxAssociate']").autocomplete(
        {
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "CreateEditRequest.aspx/GetEmpNames",
                    data: "{'empName':'" + $(this).val() + "'}",
                    dataType: "json",
                    success: function (data) {
                        response($.map(data.d, function (el) {
                            return {
                                label: el.EmpName,
                                value: el.EmpId
                            };
                        }));
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            }

当我评论 response($.map(data.d, function (el) { ... } 部分时，没有错误也没有输出。版本控制或浏览器可能存在问题兼容性。我也在 ie8 中尝试过。还可以通过添加

来检查

<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />

但对我不起作用并在标题中显示以上消息。

错误在 jquery.1.9.1.js 中

val: function( value ) {
    var ret, hooks, isFunction,
        elem = this[0];
    if ( !arguments.length ) {
        if ( elem ) {
            hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

            if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
                return ret;
            }
            ret = elem.value;
            return typeof ret === "string" ?
                // handle most common string cases
                ret.replace(rreturn, "") :
                // handle cases where value is null/undef or number
                ret == null ? "" : ret;
        }

        return;
    }

Answer 1

关于 jQuery UI's autocomplete , this 将不包含对相关 input 的引用。它可能会包含对新创建函数的引用，但这没有记录。

要实现你想要的，你有两个选择:

如果您只想在输入框上输入文本

然后，这是 documented , 使用 request.term (它是一个字符串):

$("input[id^='TextBoxAssociate']").autocomplete({
    source: function (request, response) {
        $.ajax({
            // ...
            data: "{'empName':'" + request.term + "'}", // <--------------------
            // ...
        });
    });

如果你想将实际元素绑定(bind)到自动完成

在这种情况下，您必须将元素保存在 .autocomplete() 调用外部的变量中。

由于 "input[id^='TextBoxAssociate']" 可能会返回多个元素，因此您必须使用 .each() 循环:

$("input[id^='TextBoxAssociate']").each(function () {
    var myElement = $(this);
    myElement.autocomplete({
    source: function (request, response) {
        $.ajax({
            // ...
            data: "{'empName':'" + myElement.val() + "'}", // <-----------------
            // ...
        });
    }
});

在这种方法中，其他 jQuery 函数，例如 .attr() 和其他函数，将像往常一样对 myElement 可用。