CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-autocomplete
xrcwrn
xrcwrn

Reputation: 5327

Uncaught TypeError: Cannot read property 'length' of undefined on autocomplete

I am trying to make auto complete using the example

for that i am using code 

<head>
    <title>JSP Page</title>
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui.js"></script>

    <script>

        $(function() {
            function log(message) {
                $("<div>").text(message).prependTo("#log");
                $("#log").scrollTop(0);
            }

            $("#productName").autocomplete({
                source: function(request, response) {
                    alert('hiiiii');
                    $.ajax({
                        url: "ajaxProduct",
                        dataType: "json",
                        data: {
                            qry: $("#productName").val(),
                            maxRows: 5
                        },
                        success: function(data) {
                            alert('success');
                            alert(data.productList);

                            response($.map(data.productList, function(item) {
                                alert(data.productList);
                                console.log(item);
                                return {
                                    label: item.productName,
                                    value: item.productName,
                                    id: item.productId
                                }
                            }));
                        },
                        error: function(data) {
                            alert(data.productList);
                            console.log(typeof data);
                            console.log(data);
                            alert('error');
                        }
                    });
                },
                minLength: 1,
                select: function(event, ui) {
                    log(ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
                    $("#productId").val(ui.item.id)
                },
                open: function() {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function() {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                }
            });
        });

    </script>
</head>

<body>
Product Id <span id="productId"></span><br>
Product Name <input type="text" name="productName" id="productName"/>

</body>

It is showing alert('hii');,alert('success');, then in alert box showing undefined.
On console.log it is showing

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
Uncaught TypeError: Cannot read property 'length' of undefined jquery-1.9.1.js:766
Denying load of chrome-extension://flhdcaebggmmpnnaljiajhihdfconkbj/jquery-2.0.2.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension. (index):1

Jquery:766 is

 arg is for internal usage only
    map: function( elems, callback, arg ) {
        var value,
            i = 0,
            length = elems.length,//766 line number
            isArray = isArraylike( elems ),
            ret = [];

How to resolve this.

Upvotes: 0

Views: 39856

Answers (3)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Because you are not getting productList in data try your success function like,

success: function(data) {
    if(data.productList){ // check the existance of productList
        alert(data.productList);
        response($.map(data.productList, function(item) {
            console.log(item);
            return {
               label: item.productName,
               value: item.productName,
               id: item.productId
            }
        }));
    }
}

Your response data should be like,

{"productList":{"productId": 0, "productName": null} }

Upvotes: 2

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

You have no field name like productList at backend. Use following;

response($.map(data, function(item) {
    return {
        label: item.productName,
        value: item.productName,
        id: item.productId
    }
}));

Upvotes: 1

coolguy
coolguy

Reputation: 7954

2.IN your ajaxProduct.php ,you are returning a json encoded array.Make sure it contains the key productList

$arr = array('productList' =>'somevalue' ...);

echo json_encode($arr);

Upvotes: 0

Related Questions