限制jQuery自动完成的结果
限制jQuery自动完成的结果
如何在jQuery自动完成中设置结果的限制?
这是我的代码:
$.ajax({ url: "/cache/search/SearchModels.xml", dataType: "xml", success: function(xmlResponse) { var data = $("SearchModel", xmlResponse).map(function() { return { value: $("Name", this).text() + ", " + $("Description", this).text(), id: $("No", this).text(), name: $("Name", this).text(), url: $("URL", this).text() }; }).get(); $("#txtTopSearch").autocomplete({ source: data, minLength: 2, select: function(event, ui) { BlockUI(); if (typeof (ui.item.url) != 'undefined') { window.location = ui.item.url; } else { alert('Page not found!'); $.unblockUI(); } }, search: function(event, ui) { $('#txtTopSearch').addClass('searchInProgress'); }, close: function(event, ui) { $('#txtTopSearch').removeClass('searchInProgress'); } }).data("autocomplete")._renderItem = function(ul, item) { return $("") .data("item.autocomplete", item) .append("" + item.id + "" + item.name + "") .appendTo(ul); }; }, error: function(xhr, textStatus, errorThrown) { alert('Error: ' + xhr.statusText); } });
这段代码返回查询的所有结果,但我想限制只显示10个结果。在旧的自动完成版本中,有一个选项可以实现这一点,但现在已经被废弃了。
XML示例:
1 我的产品 我的描述 蓝色;棕色; /Products/1
问题的出现原因是:在自定义的_renderItem方法中,没有对结果进行限制,导致显示的结果数量没有限制。
解决方法是:在_renderMenu方法中添加限制结果数量的代码,即在遍历结果集时,添加判断条件,只渲染前10个结果。
代码示例:
$.ui.autocomplete.prototype._renderMenu = function( ul, items ) { var self = this; $.each( items, function( index, item ) { if (index < 10) { // 在这里定义要显示的结果数量 self._renderItem( ul, item ); } }); }
参考链接:[jQueryUI: how can I custom-format the Autocomplete plug-in results?](https://stackoverflow.com/questions/2435964)
最终更新:
在之前的回答中,我误解了问题,限制了整个XML结果集而不是自动完成的结果集。
由于您已经覆盖了默认的_renderItem方法,所以可以覆盖默认的_renderMenu方法。
原始回答:
在success回调中使用$("SearchModel:lt(10)", xmlResponse).map(...。
:lt(10)选择小于10的索引元素。所以最多返回10个结果。
(当然,数字10可以是您想要的任何值)
请参考http://api.jquery.com/lt-selector/中的:lt()选择器。
更新:
尽管我不明白为什么第一个答案不起作用,因为SearchModel是一个标签,我们只针对它进行操作。我们可以将过滤移动到map方法中。
success: function(xmlResponse) { var data = $("SearchModel", xmlResponse).map(function(index) { if (index < 10) { return { value: $("Name", this).text() + ", " + $("Description", this).text(), id: $("No", this).text(), name: $("Name", this).text(), url: $("URL", this).text() }; } else { return null; } }).get(); }
参考链接:[documentation of map()](http://api.jquery.com/map/)
感谢建议,但是这实际上会限制XML数据源,并且只会返回XML文件中的前10个结果。而且这是在开始搜索之前。需要完整加载xml文件。
我现在明白了,我的两种情况(第一个也适用于这种情况)都是基于初始数据而不是自动完成过滤后的结果...再看一些...
这就是我正在寻找的解决方案,非常感谢!
为什么不限制你的查询从xml源返回的数据呢?
你必须记住,自动完成功能本质上是使用正则表达式在数据源中匹配项目。拥有大型数据源是不好的,因为它必须解析如此多的数据才能找到正确的项目。
当然,我很想这样做,但是怎么做呢?我查找了jQuery .map()
和.get()
中的限制选项,但没有找到任何限制选项,我有点困惑。
减少xml文件的大小。如果你对在文件中匹配到的所有结果都不感兴趣,那么就减少文件的大小(其中的项目数量)。
公平地说,除了更改XML文件,没有其他方法可以做到这一点吗?
阿喀琉斯是正确的,你为什么要返回100个XML条目,只显示10个呢?在XML生成的一侧(mysql/sql等)将其限制为10个是有道理的。
嗯,我从一个集成缓慢的ERP系统中获取结果。所以,我不是直接在ERP系统中搜索,而是每天制作一个缓存XML文件。这个缓存文件包含了ERP系统中的所有产品。在这个文件中进行搜索非常快,但是直接在ERP系统中搜索非常慢。
现在我理解你的方法,你遇到的问题是:1.性能会很差,因为数据会针对正则表达式进行评估以找到每个匹配的项目。2.你让浏览器处理没有真正使用的数据,这并不是查询大型数据集的理想方式。
问题的出现的原因:
- 作者在使用jQuery Autocomplete时,希望限制返回的结果数量为10个。
- 作者阅读了autocomplete API文档,并根据文档中的示例代码进行了实现。
解决方法:
- 作者使用了jQuery Autocomplete的source选项,将其设置为一个函数。
- 在该函数中,作者通过发送一个GET请求获取JSON数据,并将请求参数request传递给search.php。
- 在获取到数据后,作者使用response回调函数将结果切片为前9个结果,并将其作为autocomplete的响应。
在使用jQuery Autocomplete时,为了限制返回的结果数量,我参考了API文档,并实现了以下代码:
$input.autocomplete({ source: function( request, response ) { $.getJSON('search.php', request, function( data, status, xhr ) { // return a max of 10 results. response( data.slice(0, 9) ); }); } })
通过这种方式,我避免了在渲染层进行复杂的操作。不过,限制结果集的大小在服务器端进行操作会更合理,比如在SQL查询中使用LIMIT子句。但遗憾的是,我无法访问该部分代码,因此只能在客户端进行限制。