Question

我有自动完成功能。在输入框上生成选择项后，如何获得选择的返回编号？

$(this)
.autocomplete({ 
.
.
.select: function(event, ui){
   $(this).val(ui.item.value); //$(this) will be input with selected value
    alert(ui.item.count); // how can I get the count of the selected item?
    },    
    });

即自动完成生成

apple

pear

orange.

当我选择梨时，它会让我回复2。

Answer 1

我找到一种方式来获取您正在寻找的信息，但希望这不是最佳方式或唯一方式。

$(this).autocomplete({
    select: function(event, ui){
       // blah
    },   
    open: function(event, ui) {
        console.log($(this).next().next().children());
    }
});

open event是“打开或更新建议菜单时触发”。此时，自动完成小部件已创建dom元素及其自己的单击侦听器，以便在附加自动完成的<input>之后进行选择。（还创建了<span>，这就是我两次调用.next()的原因。）但是open函数中的那行代码将返回<li>子节点列表<ul> 1}}在里面创建。

与您的示例相匹配，您将获得以下HTML标记的<li>元素的jQuery集合：

<li class="ui-menu-item" role="presentation">
    <a id="ui-id-0" class="ui-corner-all" tabindex="-1">apple</a>
</li>
<li class="ui-menu-item" role="presentation">
    <a id="ui-id-1" class="ui-corner-all" tabindex="-1">pear</a>
</li>
<li class="ui-menu-item" role="presentation">
    <a id="ui-id-2" class="ui-corner-all" tabindex="-1">orange</a>
</li>

重要提示：此处的id标记不是元素的数字索引。它是原始源中元素的绝对ID。因此，您无法保证它们是连续的。例如，如果原始来源实际上是：["apple", "banana", "pear", "starfruit", "grape", "orange"]，那么结果数据的<a>标记的ID实际上将是apple：ui-id-0，pear：{{1} }，橙色：ui-id-2。您不能依赖此ID来为您提供用户在列表中单击的项目的顺序，因为它绝对是源而不是相对于结果集。

（我最初的列表中的ID最初从1开始，正如Hogan指出的那样，它们从0开始。）

此时，您可以执行以下两项操作中的一项来完成剩下的工作。第一种是将集合（原始的或转换的，如对象格式）存储在一些变量中，该变量将在ui-id-5事件回调的范围内。我建议将列表转换为如下对象：

select

然后您的lastResultSet = { apple : 1, pear : 2, orange : 3 }代码就可以执行此操作：

.select

另一种方法是在var selectedIndex = lastResultSet[$(this).val(ui.item.value)]; dom元素上设置自己的.click回调以捕获该点的索引。我不建议这样做，因为您可能很容易干扰自动完成行为或导致内存泄漏，因为在自动完成功能破坏<li><a> dom元素之前，不会使点击处理程序解除绑定并处置。

无论如何，我建议你在jQuery UI forums or IRC support channel上提出同样的问题，希望有人可以得到一个不那么脆弱依赖于Dom元素隐含顺序的答案。

Answer 2

你可以这样做，并返回一个从0到数字-1的数字-1

但是，这取决于内部jQuery.UI代码，可能不应该使用。

.select: function(event, ui){
    var idElements = event.toElement.id.split("-");
    var num = idElements[idElements.length-1];
    alert(num);
    },

Fiddle

工作原理：

正如帕特里克·M在内部指出的那样（他一个人离开），自动完成会创建如下所示的元素：

<li class="ui-menu-item" role="presentation">
    <a id="ui-id-0" class="ui-corner-all" tabindex="-1">apple</a>
</li>
<li class="ui-menu-item" role="presentation">
    <a id="ui-id-1" class="ui-corner-all" tabindex="-1">pear</a>
</li>
<li class="ui-menu-item" role="presentation">
    <a id="ui-id-2" class="ui-corner-all" tabindex="-1">orange</a>
</li>

我的代码获取所选元素的id，然后在末尾解析“序列号”。

以这种方式使用内部生成的UI代码是一个不错的想法，但它现在可以使用。

更好的是不使用UI的内部表示，而是实现类似于Patrick M建议的内容。或者从GIT获取自动完成的UI代码并将其添加到项目中，然后您就知道对该文件的更改不会破坏您的代码（但是，对UI的其他更改可能会。）

您还可以建议对团队进行更改，以便在事件中包含此索引。

Answer 3

只需使用jQuery Autocomplete's reponse event。

$(this).autocomplete({ 
    response: function( event, ui ) {
         alert(ui.content.length);   
    }
});

样本： http://jsfiddle.net/dirtyd77/SLGdE/12/

希望这有帮助！

注意：这适用于ajax。

。选择ui.item返回计数

3 个答案: