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

Question

我正在使用jquery 1.9.1.js和jquery-ui-1.10.3.custom.min.js。我在IE9浏览器上运行，错误为"Unable to get value of the property 'toLowerCase': object is null or undefined"。以下是我的代码。

  $("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 + "'}", // <--------------------
            // ...
        });
    });

如果您希望实际元素绑定到autocomplete

在这种情况下，您必须将元素保存在.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。