2014-06-24 67 views
1

我正在使用JqueryUI自动完成功能。有时,结果的获取不是即时的,所以我想通知用户自动完成正在提取匹配其查询的选项。如何使用提取结果状态栏打开Jquery自动完成功能

我的代码:

$("#searchid").autocomplete({ 
    source: "/autocomplete_url.php", 
    minLength:3,   
    select: function(event, ui) { 
      event.preventDefault(); 
      $("#searchid").val(ui.item.value); 
      $("#formid").submit(); 
     } 
}); 

我怎样才能使自动完成发送到正在努力寻找结果的Web服务请求时打开一个“取结果状态栏”?

+0

一种方法是捕捉'#searchid'上的'keyup'事件并显示您的状态div。当自动完成返回结果时,再次隐藏它。 –

回答

0

此方法假定您使用Ajax调用来检索数据集,但我使用了类似的东西,它工作正常。

在您想要留言的页面上设置div

HTML:

<div id="AutocompleteStatus" style="display:none">Loading data...please wait</div> 

然后你要抓住关键了事件您自动完成:

的jQuery:

$("#searchid").keyup(function() { 
    $('#AutocompleteStatus').show(); 
}); 

然后您自动完成可能是这个样子:

$("#searchid").autocomplete({ 
    source: function(request, response) { 
    $.ajax({ 
     url: "/autocomplete_url.php", 
     dataType: "json", 
     data: { 
     style: "full", 
     maxRows: 12, 
     name_startsWith: request.term 
     }, 
     success: function(data) { 
     $("#AutocompleteStatus").hide(); // <== HIDE IT HERE 
     response($.map(data.returndata, function(item) { 
      return { 
      label: item.name, 
      value: item.value 
      } 
     })); 
     } 
    }); 
    }, minLength:3,   
    select: function(event, ui) { 
     event.preventDefault(); 
     $("#searchid").val(ui.item.value); 
     $("#formid").submit(); 
    } 
}); 

所以短版本:在您的搜索框上键入显示div,从您的Ajax调用返回(我使用示例参数名称,您的示例没有给出任何实际名称),只是再次隐藏div。

相关问题