jquery - .select ui.item 返回计数

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.

当我选择 pear 时，它返回 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> 上的子节点它是在内部创建的。

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

<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 ，梨:ui-id-2 ，橙色:ui-id-5 。您不能依赖此 ID 来提供用户在列表中单击的项目的顺序，因为它是相对于源的绝对顺序，而不是相对于结果集。

(我的列表中的 id 最初也是从 1 开始的，正如 Hogan 指出的那样，它们是从 0 开始的。)

此时，您可以执行以下两件事之一来完成剩下的工作。第一个是将集合(原始或转换后的，如对象格式)存储在某个变量中，该变量将在 select 的范围内。事件回调。我建议将列表转换为如下所示的对象:

lastResultSet = {
    apple : 1,
    pear : 2,
    orange : 3
}

然后你的.select代码可以做到这一点:

var selectedIndex = lastResultSet[$(this).val(ui.item.value)];

另一种方法是设置您自己的 .click <li><a> 上的回调dom 元素捕获该点的索引。我不建议这样做，因为如果您没有在 <li> 之前取消绑定(bind)和处置单击处理程序，则可能很容易干扰自动完成行为或导致内存泄漏。 dom 元素被自动完成破坏。

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