亚马逊喜欢从两个具有共同元素的表中自动完成

Question

我在 database、Books 和 Films 中有两个表。我有一些共同点。我需要的是像 amazon auto-complete 一样的自动完成。假设共同元素是哈利波特。所以当我输入 Harry potter 时，自动完成框应该显示为 Harry potter in Books，Harry potter in Films 与 amazon.

相同

我参考了一些教程，我得到了这样的东西：

$(function () {
    $("#amzQry").autocomplete({
        minLength: 3,
        source: function (req, res) {
            $.ajax({
                url: 'http://completion.amazon.com/search/complete',
                cache: true,
                dataType: 'jsonp',
                data: {
                    'search-alias': 'aps',
                        'client': 'amazon-search-ui',
                        'mkt': '1',
                        'q': req.term
                },
                error: function (data) {
                    return false;
                },
                success: function (data) {
                    res(data[1]);
                }
            });
        }
    });
});

<input id="amzQry">

它正在以自己的方式工作，。不像我预期的那样。我的json如下：

[
    "Books",
    [
        "Harry potter",
        "King Lear",
        "Alchemist",
        ....
    ],
    "Films",
    [
        "Harry potter",
        "Avatar",
        "Terminator",
        ......
    ]
]

我在里面提供了这个 json :

url: 'myjson'

但不幸的是它不起作用。请指导我这样做。任何帮助将不胜感激。

Answer 1

创建了一个 json 这样的格式：

[
        {"label":"Harry potter", "actor":"Books"},
        {"label":"Harry potter", "actor":"Films"},
        {"label":"King Lear", "actor":"Books"},
        {"label":"Alchemist", "actor":"Books"},
        {"label":"Avatar", "actor":"Films"},
        {"label":"Terminator", "actor":"Films"},
];

然后尝试 jquery 自动完成：

$( document ).ready(function() { 
var data = [
            {"label":"Harry potter", "actor":"Books"},
            {"label":"Harry potter", "actor":"Films"},
            {"label":"King Lear", "actor":"Books"},
            {"label":"Alchemist", "actor":"Books"},
            {"label":"Avatar", "actor":"Films"},
            {"label":"Terminator", "actor":"Films"},
    ];
$( "#search" ).autocomplete(
    {
        source:data,
        select: function( event, ui ) {
            $( "#search" ).val( ui.item.label + " / " + ui.item.actor );
            return false;
        }
    }).data( "uiAutocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a><strong>" + item.label + "</strong> in " + item.actor + "</a>" )
            .appendTo( ul );
        };      

});

<input id="search">

选中此 link 以参考：Reference 它会起作用。我得到了预期的结果！干杯！！

亚马逊喜欢从两个具有共同元素的表中自动完成

Amazon like auto-complete from two tables with elements in common

jquery

json

autocomplete