2011-08-04 44 views
4

我有一个搜索使用jquery ui自动完成这很好。目前,我预加载了一个城市和国家的json列表,以便加载速度快,无需轮询服务器。不过,现在,我想添加到我的自动搜索具体名称的地方,即在我的情况下,酒店,餐馆等。jquery ui自动填充复合搜索与结果前和结果

我的问题是我应该只是抛开预装的城市和国家名单,并做普通的香草ajax数据库查询?q =当他们键入时,或者是可能的,并且它们之间有某种混合会有用。 IE预加载列表,直到他们达到一定数量的字符或少于5个结果?

它会节省加载时间还是只是头痛?如果是这样,我应该怎么做呢?

我最初把它当作ajax查询,但切换到预加载的json来加速它。完整的城市和国家名单很少,但是名单很大。 99.9%的人会搜索地点而不是特定地点。

回答

4

你将如何实现这一目标:

你可以通过传递函数来自动完成的source选项完成这样的事情。在该功能中,您将执行一些逻辑,以确定是否需要使用AJAX调用或只过滤在客户端的数据:

$("#tags").autocomplete({ 
    source: function(request, response) { 
     // This is how autocomplete finds matching results by default: 
     var results = $.ui.autocomplete.filter(common, request.term); 

     if (results.length < 5) { 
      // Perform an ajax call. 
      // In the success method, call response(results) 
     } else { 
      response(results); 
     } 
    } 
}); 

你的想法都使用两个来源“混合”自动完成很有趣。但是,在测试解决方案时,我遇到了潜在的可用性问题。通常,使用这种类型的控件时,当您输入内容时,您会希望减少的结果数

例如:让说你的本地源阵列看起来像这样:

['jquery', 'jquery-ui', 'jquery-ajax', 'jquery-plugins'] 

而且使用后显示,比方说,5个字符被键入多个结果战略。在用户输入j-q-u-e-r-y之后,键入y将触发AJAX调用,使用更多结果填充列表,这对用户而言可能并不简单,具体取决于您的用例。

例子:http://jsfiddle.net/andrewwhitaker/wSBa3/

我认为当你设置的结果数可能来自服务器返回的一些限制这个变得更好。如果您在发生AJAX调用之前将此值与最小结果数同步,则交互似乎不那么时髦。事实上,这个例子使这个概念更合理的对我说:

例子:http://jsfiddle.net/andrewwhitaker/NxELC/


是否值得呢?

它会节省加载时间还是只是头痛?

也许两个!

我认为这实际上取决于资源密集型查询的方式,我们讨论的数据量以及如何维护这样的解决方案。我无法真正推测前两种选择,但我会说,维护两个列表可能会导致维护问题。这个问题取决于你使用的服务器端技术。我认为如果你做得对,你不会有任何麻烦。

对于漫长的答案提前道歉,但我希望它有帮助。