Question

我想计算自动完成中显示的结果。

HTML输入字段：

<input name="input_1" id="input_1_1" 
type="text" value="" class="medium ui-autocomplete- input" 
tabindex="1" autocomplete="off">

Jquery自动完成：

var availableTags = [];
$("#toggles h3").each(function() {
    availableTags.push( $(this).text());    
  });
   // console.log( + " availableTags items gevonden"); 
    console.log(availableTags);
 $( ".autocomplete #input_1_1" ).autocomplete({
    source: availableTags
    });

Jquery计数代码：

var actualTags = (".ui-menu-item"); 
console.log(actualTags);
$(".autocomplete #input_1_1").keyup(function(){
 $(".count").text(actualTags.length +" results");
});

ui-menu-item是自动填充中每个结果的类。 .count =计数器必须在的<p>的类。

我只想要第三个代码来计算输入时文本框中显示的结果。这似乎工作，但它计算错误的项目，我不知道我应该在这里输入哪个项目; var actualTags =（“.ui-menu-item”）;它现在提供了文本框中的所有可用标记（甚至是那些未显示的标记）。

Answer 1

更好的选择是使用jQuery自动完成提供的response回调

搜索完成后触发，然后显示菜单。有用用于本地操作建议数据，其中包含自定义源选项回调不是必需的。当a时总是触发此事件搜索完成，即使菜单不会显示，因为有没有结果或禁用自动填充功能。

<强>代码：

$(".autocomplete #input_1_1").autocomplete({
        source: availableTags,
        response: function (event, ui) {
            $(".count").text(ui.content.length);
        }
    });

JSFiddle

Answer 2

项目在.ui-autocomplete中作为li附加。请尝试：

 $(".count").text($('.ui-autocomplete > li').length +" results");

最好使用自动完成的原生选项open，以确保仅在添加选项后才计算长度：

$( ".autocomplete #input_1_1" ).autocomplete({
source: availableTags,
open: function(event,ui){
   $(".count").text($('.ui-autocomplete > li').length +" results");
 }
});

<强> Working Demo

如何使用自动完成功能计算结果？

2 个答案: