使用jQuery自动完成动态加载内容自动完成

Question

我试图使用jQuery自动完成创建搜索功能。我有一个主导航手风琴，当每个链接被点击时，下面的代码被执行，一些外部内容被加载到一个div（与一类'细节'）。

$(".football1").click(function(){ 
    $.get('football/game1.html', function(data) { 
    $('.detail').empty().append(data); 
    }); 
}); 

对于自动完成的，我有：

$(function() { 
var availableTags = [ 
"footballGame1", 
"footballGame2", 
"footballGame3", 
"basketballGame1", 
"basketballGame2", 
"basketballGame3", 
]; 
$("#tags").autocomplete({ 
source: availableTags 
}); 
}); 

我想的是，当有人搜索标签中的一个，执行脚本和页面是动态加载。

这可能吗？如果是这样，最好的方法是什么？

Answer 1

您可以创建不同的阵列

source= [your array elements]; 

$(".football1").click(function(){ 
    $.get('football/game1.html', function(data) { 
     $('.detail').empty().append(data); 
     source= [your array according to the action]; 
    }); 
}); 

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

通过这种方式每次加载您自动完成源阵列

Answer 2

是你在找什么select事件？每当一个项目被选中，则触发事件，则可以相应地做出反应：

http://api.jqueryui.com/autocomplete/#event-select

Answer 3

不是最快的方式 - 但工作

$(".autocomplete").autocomplete({ 
source: [ 
"Football Game 1", 
"Football Game 2", 
"Football Game 3", 
"Basketball Game 1", 
"Basketball Game 2", 
"Basketball Game 3", 
] 
}); 


$(".autocomplete").click(function(){ 
if(this.value =="Football Game 1") { 
    $.get('football/game1.html', function(data) { 
    $('.detail').empty().append(data); 
    }); 
    } 
}); 

$(".autocomplete").click(function(){ 
if(this.value =="Football Game 2") { 
    $.get('football/game2.html', function(data) { 
    $('.detail').empty().append(data); 
    }); 
    } 
}); 

... 

<input class="autocomplete" />