JavaScript中自动完成小部件的问题

Question

我在java脚本中使用自动完成窗口小部件来显示商店中可用书籍的列表。小部件正在运行，我已经在控制台日志中看到了一系列书籍，但它没有显示自动完成区域中的书籍列表。任何形式的指导或示例代码都将受到赞赏。

<p style="display: inline;"><b>Please Select Book:</b></p>
<input name="book" type="text" id="book_item" value="<?php echo $myArray['book_name']; ?>" />
<input name="book_id" type="hidden" id="book_item_id" value="" />

JavaScript是：

$(function () {

        var availableBooks =<?php echo json_encode($myArray) ?>;           
        console.log(availableBooks);   //I get all the books and their details here so jason array has no problem, problem starts at this point

        $("#book_item").autocomplete({
            open: function (e) {
                valid = false;
            },
            select: function (event, ui) {
                $("#book_item_id").val(ui.item.id);
                valid = true;
            },
            close: function (e) {
                if (!valid)
                    $(this).val('');
            },
            source: availableBooks
        });

        $("#book_item").change(function () {
            if (availableBooks.indexOf($(this).val()) == -1) {
                $(this).val("");
                $("#book_item_id").val("");
            }
        });
    });

这就是数组的样子，数组没有什么特别之处，只是本书的细节。它的退出比下面更长，但显示了它的一部分作为例子：

book_name: "Elmo"
book_status: "active"
product_id: "1554345CCD1"

Answer 1

示例代码

$(function () {
//Start
 var availableBooks =[{
"label": "Elmo",
"book_status": "active",
"value": "1554345CCD1"}]; 

$("#book_item").autocomplete({
source: availableBooks
});

//End of line.
});

以上代码有效......注意我更改了标签，值更改为标签值，因为这是UI正在寻找的内容。 jsfiddle.net/3nkut7o6