具体化。访问自动完成元素属性

Question

我想答案应该很简单，但我要疯狂地寻找答案。

假设我有一个像这样定义的 Materialize 自动完成元素。

 $('#element_id).autocomplete({
                limit:5,
                data:{"a":null,"b":null,"c":null},
                onAutocomplete:function(){whatEverYouWannaDoAfterCompletion()}
            });

但是，获取选定的值没有问题，我的问题是...... 是否可以使用 activeIndex 自动完成项属性获取选定的索引，或者我应该“导航”通过渲染的组件来查找选定的事件？.

谢谢你。

Answer 1

虽然最终目标对我来说尚不清楚，但我会尝试至少澄清如何访问属性 activeIndex 以及更多内容。

$(document).ready(function() {
  $('input').autocomplete({
    data: {
      a: null,
      b1: null,
      b2: null
    }
  });
  
  function checkIndex() {
    var el = $('input').get(0);
    var instance = M.Autocomplete.getInstance(el);
    console.log(instance.count, instance.activeIndex, $('input').val());
    setTimeout(checkIndex, 333);
  }
  
  checkIndex();
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<div class="container input-field">
  <input class="autocomplete">
</div>

在这里，我准备了一个时间驱动的函数来检查属性，而不依赖于元素焦点。关键步骤是获取 Materialize 空间中的元素实例（不是 jQuery！）。

对于属性的感官理解，我认为我们应该在使用前仔细测试它们。在我的测试中，即使选择完全匹配选项值，我也看到了唯一的

activeIndex=-1

值。预期的行为与我的想法不同。