本文介绍了限制的结果jQuery的自动完成的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

你怎么能对从jQuery自动完成的结果设置限制?

这是我的code:

  $阿贾克斯({
            网址:/cache/search/SearchModels.xml
            数据类型:XML,
            成功:函数(xmlResponse){
                VAR数据= $(SearchModel,xmlResponse).MAP(函数(){
                    返回{
                        价值:$(名,这一点)的.text()+,+ $(说明,这一点)的.text()
                        编号:$(否,这一点)的.text(),
                        名称:$(名,这一点)的.text()
                        网址:$(URL,这一点)的.text()
                    };
                })。得到();
                $(#txtTopSearch)。自动完成({
                    来源:资料,
                    的minLength:2,
                    选择:函数(事件,UI){
                        BlockUI();
                        如果(typeof运算(ui.item.url)!='不确定'){
                            window.location的= ui.item.url;
                        }
                        其他{
                            警报(找不到网页!');
                            $ .unblockUI();
                        }
                    },
                    搜索:函数(事件,UI){
                        $('#txtTopSearch')addClass('searchInProgress');
                    },
                    关闭:函数(事件,UI){
                        $('#txtTopSearch')removeClass移除('searchInProgress')。
                    }
                })。数据(自动完成)._ renderItem =功能(UL,项目){
                    返回$(<立GT;< /李>中)
                    。数据(item.autocomplete项)
                    .append(< A><跨度风格='字体大小:.9em;字体重量:大胆;>中+ item.id +< / SPAN>< BR /><跨度风格='字体大小:.8em;>中+ item.name +< / SPAN>< / A>中)
                    .appendTo(微升);
                };
            },
            错误:功能(XHR,textStatus,errorThrown){
                警报('错误:'+ xhr.statusText);
            }
        });

这code返回所有结果查询,但我想这个限制只是显示10个结果。在旧版本的自动完成有这个选项,但现在已是德precated。

在XML实例:

 <?XML版本=1.0&GT?;
< ArrayOfSearchModel的xmlns:XSI =htt​​p://www.w3.org/2001/XMLSchema-instance的xmlns:XSD =htt​​p://www.w3.org/2001/XMLSchema>
  < SearchModel>
    &所述;否→1&下; /否GT;
    <名称>我的产品< /名称>
    <说明>我描述< /说明>
    <&标签GT;蓝色;棕色;< /标签>
    < URL> /产品/ 1 LT; / URL>
  < / SearchModel>
< / ArrayOfSearchModel>


解决方案

最后更新结果
的理解,在我的previous答案我是限制整个XML结果集,而不是自动完成的结果后

正如你所覆盖默认 _renderItem 方法,可以覆盖默认 _renderMenu

  $。ui.autocomplete.prototype._renderMenu =功能(UL,物品){
   VAR自我=这一点;
   $。每次(项功能(索引项){
      如果(指数小于10)//这里我们定义多少结果显示
         {self._renderItem(UL,项目);}
      });
}

的回答是从这个jQueryUI:我怎么能自定义格式的自动完成功能插件的结果吗?所以要感谢@cheeso ..


原来的答案

在您成功回调使用 $(SearchModel:LT(10),xmlResponse).MAP(...

:LT(10)元素得到与将被退回小于10所以最大10个结果指数...

的数量当然10可以是任何你想要的)

:LT()选择在

更新

虽然我不明白为什么第一个答案是不行的,因为 SearchModel 是一个标记,我们的目标是。我们可以在地图的方法移动过滤。

 成功:函数(xmlResponse){
                VAR数据= $(SearchModel,xmlResponse).MAP(函数(指数){
                    如果(指数小于10)
                      {
                        返回{
                            价值:$(名,这一点)的.text()+,+ $(说明,这一点)的.text()
                            编号:$(否,这一点)的.text(),
                            名称:$(名,这一点)的.text()
                            网址:$(URL,这一点)的.text()
                               };
                      }
                      其他
                      {返回null; }
                })。得到();

How can you set a limit on the result from the jQuery autocomplete?

This is my code:

        $.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);
            }
        });

This code return all results in the query, but I want to limit this to just showing 10 results. In the old autocomplete version there was an option for this, but it is now deprecated.

Example of the 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>
解决方案

Final Update
after understanding that in my previous answers i was limiting the whole xml result set and not the results of the autocomplete

As you have overridden the default _renderItem method, you can override the default _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 );}
      });
}

answer is modified from this jQueryUI: how can I custom-format the Autocomplete plug-in results? so thanks go to @cheeso..


Original Answer

In you success callback use $("SearchModel:lt(10)", xmlResponse).map(...

The :lt(10) gets elements with an index of less than 10. So max 10 results will be returned..

(of course the number 10 could be anything you want)

Look at :lt() selector at http://api.jquery.com/lt-selector/

update

Although i cannot understand why the first answer does not work, since the SearchModel is a tag and we target that.. we can move the filtering in the map method..

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()

这篇关于限制的结果jQuery的自动完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 12:27
查看更多