javascript - 在 Jquery Autocomplete 中遍历列表中的第一个值

Question

我正在尝试使用 jQuery 遍历 div 来引用列表中的值以获取值。

我尝试了很多不同的方法，包括 .get()、.find() 和 .children()。

我正在使用 jQuery 自动完成插件，所以我无法在此处添加代码!不过我附上了屏幕截图。

注意:我相信我需要引用 ui-menu-item-wrapper 类似 ui-menu-item-wrapper[0] 而不是ui-id-2 或 tabindex。

如何获取列表中第一项的值？

编辑:弄清楚如何复制代码!

<ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none; width: 746px; position: relative; top: -2465.55px; left: 261.858px;" xpath="1">
   <li class="ui-menu-item">
      <div id="ui-id-2" tabindex="-1" class="ui-menu-item-wrapper">French</div>
   </li>
   <li class="ui-menu-item">
      <div id="ui-id-3" tabindex="-1" class="ui-menu-item-wrapper">Mayfair</div>
   </li>
   <li class="ui-menu-item">
      <div id="ui-id-4" tabindex="-1" class="ui-menu-item-wrapper">Fish in a Tie</div>
   </li>
   <li class="ui-menu-item">
      <div id="ui-id-5" tabindex="-1" class="ui-menu-item-wrapper">French Cuisine</div>
   </li>
   <li class="ui-menu-item">
      <div id="ui-id-6" tabindex="-1" class="ui-menu-item-wrapper">Fine Dining</div>
   </li>
</ul>

Answer 1

直接回答，菜单项经常被创建和销毁，所以当它有一些时，你必须获取第一个。创建自动完成功能时会创建菜单项，但其中的项目会发生变化。

因此，我们可以在一个事件中找到它们，例如“打开”事件，这样我们就可以从中选择第一个。在这里，我在 console.log(di)

中显示菜单中第一项的文本

$(function() {
  var mythings = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"];
  var myA = $("#myautomagicautocomplete");
  myA.autocomplete({
    autoFocus: true,
    source: mythings
  });
  var w = myA.autocomplete("widget");
  myA.on("autocompleteopen", function(event, ui) {
      // var w = myA.autocomplete("widget");
      var fi = w.find('.ui-menu-item').first();
      var di = fi.find('.ui-menu-item-wrapper').text();
      console.dir(di);
    });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input type="text" id="myautomagicautocomplete" />