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

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

Issue with auto-complete widgets in JavaScript

javascript

widget