文章/答案/技术大牛

发布

社区首页 >问答首页 >要返回计数的.select ui.item

问要返回计数的.select ui.item
EN

Stack Overflow用户

提问于 2013-03-05 09:08:50

回答 3查看 934关注 0票数 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?
    },    
    });

ie自动完成生成

apple

pear

orange.

当我选择pear时，它返回2。

jquery

autocomplete

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-03-06 00:16:12

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

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

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

与您的示例相匹配，您将获得以下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"]，那么结果数据的橙色标记的id实际上是apple：ui-id-0，pear：ui-id-2，<a>：ui-id-5。您不能依赖这个id来给出用户在列表中单击的项的排序，因为它对于源是绝对的，而不是相对于结果集的。

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

在这一点上，您可以做两件事中的一件来完成剩下的工作。第一种是将集合(原始的或转换的，如对象格式)存储在某个变量中，该变量将在select事件回调的作用域内。我建议将列表转换为如下所示的对象：

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

那么你的.select代码就可以做到这一点：

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

另一种方法是在<li><a> dom元素上设置您自己的.click回调，以捕获该点的索引。我不推荐这样做，因为在<li> dom元素被自动完成销毁之前，如果没有解除绑定和释放单击处理程序，可能很容易干扰自动完成行为，或者导致内存泄漏。

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

票数 2

Stack Overflow用户

发布于 2013-03-06 00:35:52

您可以这样做，并返回一个从0到number of items -1的数字

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

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

Fiddle

它的工作原理：

正如Patrick 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获取autocomplete的UI代码并将其添加到您的项目中，这样您就知道对该文件的更改不会破坏您的代码(但是，对UI的其他更改可能会破坏您的代码)。

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

票数 1

Stack Overflow用户

发布于 2013-03-06 02:54:25

只需使用jQuery Autocomplete's reponse event即可。

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

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

希望这能有所帮助！

注意:这确实适用于ajax。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15214069

复制

相似问题

问要返回计数的.select ui.item
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问要返回计数的.select ui.itemEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问要返回计数的.select ui.item
EN