Dynamically loading content with jQuery Autocomplete

Question

I'm trying to create a search function using jQuery Autocomplete. I have an accordion for the main navigation, that, when each link is clicked, the following code is executed and some external content is loaded into a div (with a class of 'detail').

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

For the auto complete, I have:

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

What I want is that, when someone searches one of the tags, the script is executed and the page is dynamically loaded.

Is this possible? And if so, whats the best way to go about it?

Answer 1

you can create different arrays

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
  });
});

by this way each time you load you autocomplete source array

Answer 2

Is the select event what you're looking for? Whenever an item is selected, an event is triggered and you can react accordingly:

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

Answer 3

Not the quickest way - but does work

$( ".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" />