Jquery UI 从 Asp.net MVC5 中的两个数据源自动完成

Question

我正在开发一个 ASP.net MVC5 (C#) 网络应用程序，我试图显示来自两个不同 table 的自动完成数据（一个是设备 table，另一个是新闻table) 在单个文本框中的 div 中显示 phonearena.com，当您输入查询时，它们会显示包含该查询的所有 phones 和 tablets还有新闻和评论。

现在我可以像这样从一个数据源自动完成数据。

$(function () {
function log(message) { }

$("#search_input").autocomplete({
    source: "/Search/?term",
    minLength: 1,
    select: function (event, ui) {
        $("#mobile").val(ui.item.title);
        $("#mobile-query").val(ui.item.query);
        return false;
    }
})
.data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li>")
    .append("<a href='/" + item.query + "'>" + item.title + "</a>")
    .appendTo(ul);
};

});

我想在 div 中显示设备和新闻列表。请在我提到的网站上查看并写下任何著名的phone，然后下拉div 将弹出记录。你们能帮我解决这个问题吗？谢谢

Tables结构

设备Table

Device_Id-----Device_Name----- Device_Query

1-----------------iPhone 6---------------iphone_6

2----------------银河S6------------银河-s6

3----------------Lumia 990--------------lumia_990

新闻Table

News_id------News_Title-------- ------News_Query----------------Device_Id

1------------iPhone6 评论--------------iphone-6-评论-- ------------------1

2------------iPhone 6 优点和缺点--------iphone-6-优点-缺点--- --------------1

3------------Lumia 990 相机评测--------lumia-990-camera-review-----3

Answer 1

为此，您可以创建两个具有相同列名的查询并将其联合起来：

select device_name as title, device_query as query, 'device' as q_type from device_table // add your where clause here

union 

select news_title as title, news_query as query, 'news' as q_type from news_table // add your where clause here

并在自动完成中

.data("ui-autocomplete")._renderItem = function (ul, item) {

if(item.q_type == "device")
{
// add your device type html
}
else
{
 // add your news type html
}
};

Jquery UI 从 Asp.net MVC5 中的两个数据源自动完成

Jquery UI autocomplete from two data sources in Asp.net MVC5

javascript

asp.net-mvc

jquery

autocomplete

jquery-ui-autocomplete