使用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" />