限制jQuery自动完成的结果

14 浏览
0 Comments

限制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
      
    
    

    0
    0 Comments

    问题的出现原因是:在自定义的_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文件。

    我现在明白了,我的两种情况(第一个也适用于这种情况)都是基于初始数据而不是自动完成过滤后的结果...再看一些...

    这就是我正在寻找的解决方案,非常感谢!

    0
    0 Comments

    为什么不限制你的查询从xml源返回的数据呢?

    你必须记住,自动完成功能本质上是使用正则表达式在数据源中匹配项目。拥有大型数据源是不好的,因为它必须解析如此多的数据才能找到正确的项目。

    当然,我很想这样做,但是怎么做呢?我查找了jQuery .map().get()中的限制选项,但没有找到任何限制选项,我有点困惑。

    减少xml文件的大小。如果你对在文件中匹配到的所有结果都不感兴趣,那么就减少文件的大小(其中的项目数量)。

    公平地说,除了更改XML文件,没有其他方法可以做到这一点吗?

    阿喀琉斯是正确的,你为什么要返回100个XML条目,只显示10个呢?在XML生成的一侧(mysql/sql等)将其限制为10个是有道理的。

    嗯,我从一个集成缓慢的ERP系统中获取结果。所以,我不是直接在ERP系统中搜索,而是每天制作一个缓存XML文件。这个缓存文件包含了ERP系统中的所有产品。在这个文件中进行搜索非常快,但是直接在ERP系统中搜索非常慢。

    现在我理解你的方法,你遇到的问题是:1.性能会很差,因为数据会针对正则表达式进行评估以找到每个匹配的项目。2.你让浏览器处理没有真正使用的数据,这并不是查询大型数据集的理想方式。

    0
    0 Comments

    问题的出现的原因:

    - 作者在使用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子句。但遗憾的是,我无法访问该部分代码,因此只能在客户端进行限制。

    0