简体   繁体   English

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

[英]Issue with auto-complete widgets in JavaScript

I am using an auto-complete widget in java script to show a list of available books in a store. 我正在使用Java脚本中的自动完成小部件来显示商店中可用书籍的列表。 The widget is working and I already saw the array of books in the console log but it does not show the list of the books in the auto-complete area. 该小部件正在运行,并且我已经在控制台日志中看到了书的阵列,但是它没有在自动完成区域中显示书的列表。 Any kind of guidance or sample code would be appreciated. 任何形式的指导或示例代码将不胜感激。

<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="" />

And the JavaScript is: 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("");
            }
        });
    });

And here is how the array looks like, there is nothing special about the array, just details of the book. 这就是数组的样子,数组没有什么特别的,仅是本书的细节。 It is quit longer than below but showed some part of it as example: 它退出的时间比下面更长,但以示例的形式显示了一部分:

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

Example Code 范例程式码

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

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

//End of line.
});

The above code works... Noticed I changed the label, value to say label value because that is what the UI is looking for. 上面的代码有效...注意,我更改了标签,将值改为标签值,因为这是UI所寻找的。 小提琴 jsfiddle.net/3nkut7o6 jsfiddle.net/3nkut7o6

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM