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

我正在使用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"