2

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

$(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。

4

3 回答 3

2

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

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

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

与您的示例相匹配，您将获得<li>以下 HTML 标记的 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。因此，您无法保证它们是连续的。例如，如果原始来源实际上是 this: ，那么结果数据的标签["apple", "banana", "pear", "starfruit", "grape", "orange"]ID实际上是 apple: 、 pear: 、 orange: 。您不能依赖此 id 为您提供用户在列表中单击的项目的顺序，因为它是绝对源而不是相对于结果集。<a>ui-id-0ui-id-2ui-id-5

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

在这一点上，你可以做两件事中的一件来帮助你完成剩下的工作。第一个是将集合（原始的或转换的，如对象格式）存储在某个变量中，该变量将在select事件回调的范围内。我建议将列表转换为如下对象：

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

然后你的.select代码可以这样做：

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

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

无论如何，我建议您在jQuery UI 论坛或 IRC 支持频道上提出同样的问题，希望有人可以为您提供一个不那么脆弱地依赖于隐含的 Dom 元素顺序的答案。

于 2013-03-05T16:16:12.293 回答
1

您可以这样做并返回一个从 0 到项目数 -1 的数字

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

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

小提琴

这个怎么运作：

正如帕特里克 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 的其他更改可能会。）

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

于 2013-03-05T16:35:52.400 回答
1

只需使用jQuery Autocomplete 的reponse事件。

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

演示：http: //jsfiddle.net/dirtyd77/SLGdE/12/

希望这可以帮助！

注意：这确实适用于 ajax。

于 2013-03-05T18:54:24.813 回答