Question

我正在尝试使用jQuery Autocomplete创建搜索功能。我有一个主导航的手风琴，当点击每个链接时，执行以下代码并将一些外部内容加载到div（具有'detail'类）。

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

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

3 个答案: