CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-autocomplete
Rajaram Shelar
Rajaram Shelar

Reputation: 7877

Unable to get value of textbox in jquery autocomplete

I am using jquery 1.9.1.js and jquery-ui-1.10.3.custom.min.js. I run on IE9 browser with the error "Unable to get value of the property 'toLowerCase': object is null or undefined". Below is my code.

  $("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");
                    }
                });
            }

When I comment response($.map(data.d, function (el) { ... } part then there is not error and not output. There could be issue in versioning or browser compatability. I tried in ie8 also. Also check by adding 

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

But not work for me and showing above message in title.

Error IS here in 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;
    }

Upvotes: 3

Views: 5456

Answers (1)

acdcjunior
acdcjunior

Reputation: 135762

On jQuery UI's autocomplete, the this will not hold a reference to the related input. It probably will hold a reference to the newly created function, but this is undocumented.

To achieve what you want, you have two options:

If you just want the text typed on the input

Then, and this is documented, use request.term (it is a string):

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

If you want the actual element bound to the autocomplete

In this case you'll have to hold the element in a variable external to the .autocomplete() call.

As "input[id^='TextBoxAssociate']" will probably return several elements, you'll have to use an .each() loop:

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

In this approach, the other jQuery functions, such as .attr() and else, will be available to myElement as usual.

Upvotes: 4

Related Questions