我尝试使用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>
答案 0 :(得分: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>