css - 带有搜索框的导航栏 - MaterializeCss

Question

我正在尝试使用 materializecss 在我的导航栏中创建一个功能搜索栏。我可以放置搜索图标并在其中写入文本，但它不起作用。我只有设计部分。我无法找到 jquery 来初始化搜索框并使其工作。

<ul class="right hide-on-med-and-down">
                        <li>
                            <div class="input-field col s6 s12 white-text">
                                <i class="white-text small material-icons prefix">search</i>
                                <input type="text" placeholder="search" id="autocomplete-input" class="white-text">
                            </div>
                        </li>
</ul>

Answer 1

您还没有在 JS 文件中初始化自动完成和它的选项。您可以查看下面的 JS 代码。

尝试运行下面的演示，一个实现了自动完成的搜索栏。 您可以在搜索栏自动完成中获取 Apple、Microsoft 和 Google。如需更多选项，请将它们添加到自动完成初始化下的数据对象中。

var myData={
      "Apple": null,
      "Microsoft": null,
      "Google": 'https://placehold.it/250x250'
    };

$(document).ready(function() {
  $('input.autocomplete').autocomplete({
    data: myData,
    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    onAutocomplete: function(val) {
      // Callback function when value is autcompleted.
    },
    minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>



<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <i class="material-icons prefix">search</i>
        <input type="text" id="autocomplete-input" class="autocomplete">
        <label for="autocomplete-input">Search</label>
      </div>
    </div>
  </div>
</div>