在jQuery Autocomplete中限制结果

ma8fv8wu  于 2023-06-05  发布在  jQuery
关注(0)|答案(6)|浏览(189)

如何对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 $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a><span style='font-size:.9em; font-weight:bold;'>" + item.id + "</span><br /><span style='font-size:.8em;'>" + item.name + "</span></a>")
                    .appendTo(ul);
                };
            },
            error: function(xhr, textStatus, errorThrown) {
                alert('Error: ' + xhr.statusText);
            }
        });

这段代码返回查询中的所有结果,但我想限制为只显示10个结果。在旧的自动完成版本中有一个选项,但现在不推荐使用。
XML示例:

<?xml version="1.0"?>
<ArrayOfSearchModel xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <SearchModel>
    <No>1</No>
    <Name>My product</Name>
    <Description>My description</Description>
    <Tags>blue;brown;</Tags>
    <URL>/Products/1</URL>
  </SearchModel>
</ArrayOfSearchModel>
xoshrz7s

xoshrz7s1#

最终更新

  • 在了解到我在前面的回答中限制了整个xml结果集而不是自动完成的结果之后 *

由于已经覆盖了默认的_renderItem方法,因此可以覆盖默认的_renderMenu

$.ui.autocomplete.prototype._renderMenu = function( ul, items ) {
   var self = this;
   $.each( items, function( index, item ) {
      if (index < 10) // here we define how many results to show
         {self._renderItem( ul, item );}
      });
}

答案是从这个jQueryUI: how can I custom-format the Autocomplete plug-in results?修改的,所以感谢@cheeso..

原始答案

在你的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()

hzbexzde

hzbexzde2#

为什么不限制查询从xml源返回的数据呢?
您必须记住,自动完成功能本质上是使用正则表达式来匹配数据源中的项。拥有一个大的数据源是不好的,因为它必须解析这么多的数据,只是为了找到正确的项目。

ncecgwcz

ncecgwcz3#

这是我在阅读了一些自动补全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) );
    });
  }
})

遵循这个模式可以省去渲染层中的一些繁琐工作。

5n0oy7gb

5n0oy7gb4#

限制结果的最快方法是在“开放”事件期间进行。我们可以删除jquery ui动态创建的部分内容,减少children元素数组。
这个解决方案解决了我同样的问题:

var maxResults = 10;
$input.autocomplete({
    source: somefile.json,
    open: function(event,ui){
          $(this).data("uiAutocomplete").menu.element.children().slice(maxResults).remove();
         }
})
bwntbbo3

bwntbbo35#

您可以为“open”事件添加一个处理程序:

open:function(event,ui){ 
var maxListLength=10;
var ul = jQuery( "#txtTopSearch" ).autocomplete("widget")[0];
while(ul.childNodes.length > maxListLength)
      ul.removeChild(ul.childNodes[ul.childNodes.length-1]);
}
amrnrhlw

amrnrhlw6#

我有一个WordPress的线索。
检查像assets/js/custom.js这样的文件(如果有的话):

$('input[name=ad_title]').typeahead({
        minLength: 1,
        delay: 250,
        scrollBar: true,
        autoSelect: true,
        fitToElement: true,
        highlight: false,
        hint: true,
        source: function (query, process) {
            return $.get(ajax_url, {query: query, action: 'fetch_suggestions'}, function (data) {
                jQuery('.adforest-search-spinner').remove();

                data = $.parseJSON(data);
                return process(data);
            });
        }

并将minLenght更改为更多字母或添加maxResults

相关问题