【问题标题】:jquery ui autocomplete: count resultsjquery ui自动完成:计算结果
【发布时间】:2022-02-08 18:31:12
【问题描述】:

我想知道是否有一种方法可以计算您在文本框中键入内容时显示的结果数。计算 li 元素的工作量,但我敢打赌,会有更聪明的方法。谢谢

【问题讨论】:

    标签: jquery-ui jquery-autocomplete


    【解决方案1】:

    我认为这不可能直接使用 JQueryUI 事件。我一直在寻找没有成功的方法。

    所有关联的事件只返回被点击的元素(在列表显示之后),或者关于事件的信息(不是关于列表的)。

    你可以在这里看到它:http://jqueryui.com/demos/autocomplete/#event-focus

    你说的是最接近的解决方案:

    $( "#tags" ).autocomplete({
      source: availableTags,
      open: function(event,ui){
        var len = $('.ui-autocomplete > li').length;
        $('#count').html('Found '+len+' results');
      }
    });
    

    【讨论】:

      【解决方案2】:

      当我输入没有返回结果的内容时,上述解决方案对我不起作用。它不断显示最后一个匹配字符串的结果数量。这是一个有效的解决方案。

      source: function (request, response) {
          $.getJSON(
              "/Ajax/GetSomeJson.ashx",
              { q: request.term },
              function (data) {
                  console.log(data.length);
                   $('#count').html('Found '+ data.length +' results');
      
                  response($.map(data, function (item) {
                      return item;
                  }));
              }
          );
      }
      

      【讨论】:

        【解决方案3】:

        根据 Fran 的回答,我找到了一种方法来计算找到的匹配项,但我认为这不是 100% 可靠的。不过,它对我有用。

        $('#autocompleteinput').autocomplete({
            source: datasource,
            search: function()
            {
                $(this).data('count',0);
            },
            open: function()
            {
                $(this).data('count',$('.ui-autocomplete > li').length);
            },
            delay: 0
        }).keyup(function(){
            $('#count').html('Found '+$(this).data('count')+' items');
        });
        

        延迟必须为0,否则经常会在搜索之前触发keyup,并不能很好地计算。

        【讨论】:

          【解决方案4】:

          这对我有用。如果只有一个匹配结果,我的要求是在模糊事件上自动选择。以前我尝试过var len= $('.ui-autocomplete > li').length;,但我并没有在所有情况下都工作。有时它会将以前的结果加到计数/长度中。

          以下代码对我有用:

          .on('autocompletechange', function() {
                  if ($(this).data('ui-autocomplete').selectedItem === null && ($(this).autocomplete("widget").find( "li" ).length == 1) ) {
                      //this will trigger your select automatically so it will handle other custom override you did for select
                      $(this).data('ui-autocomplete').menu.element.children('li:first').children('a').trigger('click');
                  }
              })
          

          【讨论】:

            【解决方案5】:

            Fran 的回答很好,但它会从页面上的所有“.ui-autocomplete”中计算“li”。 此解决方案将仅计算当前自动完成中的“li”元素:http://www.jbmurphy.com/2012/04/27/how-to-get-the-count-of-items-returned-in-jquery-autocomplete/

            open: function(event,ui){
                var len = $(this).autocomplete("widget").find( "li" ).length;
                },
            

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 2015-01-28
              • 2015-08-09
              • 2011-10-12
              • 1970-01-01
              • 1970-01-01
              • 2011-11-28
              • 2013-12-01
              相关资源
              最近更新 更多