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

时间:2015-11-12 18:05:39

标签: javascript jquery asp.net-mvc autocomplete jquery-ui-autocomplete

我正在研究一个ASP.net MVC5(C#)Web应用程序我试图在单个文本框中显示来自两个不同表(一个是设备表,另一个是新闻表)的自动完成数据,如{{3} }正在显示,当您输入查询时,它们会显示包含该查询的所有手机和平板电脑以及新闻和评论。 phonearena.com

现在我能够从这样的一个数据源自动完成数据。

$(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中显示设备和新闻列表。请在我提到的网站上看到并写下任何着名的手机,下拉div会弹出记录。你能帮我解决这个问题。感谢

表格结构

设备表

DEVICE_ID -----的设备名称 -----的 Device_Query

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

2 ----------------- Galaxy S6 -------------- galaxy-s6

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

新闻表

News_id ------的 News_Title ---------------的 News_Query - --------------的 DEVICE_ID

1 ----------- iPhone 6评论--------------- iphone-6-review ------------ ---------- 1

2 ----------- iPhone 6优点&amp;缺点---------- iphone -6-利弊利弊---------------- 1

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

1 个答案:

答案 0 :(得分: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
}
};