jQuery UI自动完成小部件 - 如何获取对菜单的引用？

Question

我希望能够获得自动完成构建的菜单对象的引用(所以我可以得到.attr("id")例子),但我不是很熟悉jQuery/javascript.在源头,我发现了这个:

https://github.com/jquery/jquery-ui/blob/1-9-stable/ui/jquery.ui.autocomplete.js#L182

所以有一个物体飞来飞去,我似乎无法找到如何抓住它.

所以,例如,如果我有一个带有自动完成的输入,就像这样:

// input = reference to the input text box on the form
input.autocomplete({
  select: function(event, ui) {
    // how to get the reference here?

    // some things I've tried
    // return input.menu
    // return input.data("menu")
    // and a few others but they didn't work either
  }
});

我试着查看数据对象本身,但是有很多选项我可以整天看着它而仍然找不到我正在寻找的东西.非常感谢任何帮助或见解.

Answer 1

您可以通过查看分配给其根元素(输入)的数据集来获取小部件的引用.然后获取菜单属性(及其底层元素)有点琐碎.)

  select: function(event, ui) {
    // that's how get the menu reference:
    var widget = $(this).data('ui-autocomplete'),
        menu   = widget.menu,
        $ul    = menu.element,
        id     = $ul.attr('id'); // or $ul[0].id
  }

... this在select函数内部指的是<input>当此函数被称为事件处理程序时.

Answer 2

一种更简单的方法: $(this).autocomplete('widget');
它的作用如下:

select: function(event, ui) {
// that's how get the menu reference:
var widget = $(this).data('ui-autocomplete'),
    menu   = widget.menu,
    $ul    = menu.element,
    id     = $ul.attr('id'); // or $ul[0].id

}

它给出了ul列表

$(this).autocomplete('widget').attr('id');