Question

我正在尝试使用example

自动完成

因为我正在使用代码

<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>

显示alert('hii');，alert('success');，然后在显示undefined的提醒框中。
在console.log上显示

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是

 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 = [];

如何解决此问题。

Answer 1

因为您未productList data尝试success function喜欢，

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
            }
        }));
    }
}

您的response data应该是，

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

Answer 2

2.在你的ajaxProduct.php中，你将返回一个json编码的数组。确保它包含密钥productList

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

echo json_encode($arr);

Answer 3

您在后端没有productList这样的字段名称。使用以下;

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

未捕获的TypeError：无法读取属性＆＃39; length＆＃39;自动完成时未定义的

3 个答案: