Question

我在database，Books和Films中有两个表。我有一些共同的元素。我需要的是与amazon auto-complete一样的自动完成功能。假设共同的元素是哈利波特。因此，当我输入哈利波特时，自动完整的盒子应该像哈利波特在书中，哈利波特在电影中与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">

点击此链接参考：Reference 它会工作。我得到了预期的结果!!干杯!!

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

1 个答案: