Materializecss：从自动完成弹出窗口中选择项目时是否有任何事件？

Question

我正在尝试将 autocomplete 用作搜索框，以便在用户键入时通过更新数据来在弹出窗口中显示搜索结果。当用户单击弹出窗口中的项目时，他应该被导航到另一个页面。我还想知道是否有任何方法可以将 id 与数据相关联，以便它可以在其他页面中使用。

如果自动完成不是合适的候选者，请建议 materializecss 提供的任何替代方法。

Answer 1

 
  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
      onAutocomplete: function(val) {
      // Callback function when value is autcompleted.
      alert(val)
      
      //Here you then can do whatever you want, val tells you what got clicked so you can push to another page etc...
    },
    });
  });

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


<div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>

在这里，我修改了它，val 告诉你点击了什么，你可以例如推送到另一个页面并使用该值等，这取决于你的使用情况。任何问题都可以评论:)

Materializecss：从自动完成弹出窗口中选择项目时是否有任何事件？

Materializecss: Is there any event when an item is selected from the autocomplete popup?

autocomplete

search-box

materialize