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?

Mohamed Melouk · Accepted Answer · 2014-04-30 18:17:36Z

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

answered Apr 30, 2014 at 18:17

Mohamed Melouk

1922 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anthony · Accepted Answer · 2014-04-30 18:21:46Z

1

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

answered Apr 30, 2014 at 18:21

Anthony

9767 silver badges15 bronze badges

Comments

Conrad M · Accepted Answer · 2014-05-08 19:02:24Z

0

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

answered May 8, 2014 at 19:02

Conrad M

2031 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

Dynamically loading content with jQuery Autocomplete

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related