gpt4 book ai didi

javascript - Materializecss 自动完成没有元素出现 1.0.0 没有 jQuery

转载 作者:行者123 更新时间:2023-12-03 00:59:59 26 4
gpt4 key购买 nike

我对 javascript、jquery、ajax 等不太有经验。我在 0.100.2 版本上取得了一些成功,但我想我会尝试获得不依赖于 jquery 工作的版本。我已经按照文档中的说明进行了尝试。这是整个页面:

<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">textsms</i>
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, options);
});


// Or with jQuery

$(document).ready(function(){
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
});
});
</script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>

这些是我遇到的错误。 Error

我看到有些人谈论 1.0.0 的自动完成初始化问题,但我不确定他们谈论的全部内容。

最佳答案

您正在使用 jQuery 库,而不导入脚本文件,
在入门示例中也提到了,
使用 Vanilla JavascriptjQuery 并相应地使用代码片段。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
</head>
<body>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">textsms</i>
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
</div>
</div>
</div>
</div>

<!-- Scripts -->
<!-- jQuery script file, this imports the jQuery library in your project -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/materialize.min.js"></script>
<script>
$(document).ready(function() {
// this options Object, can be improved to be received
// from your RESTful API in the future
var options = {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
};

$('input.autocomplete').autocomplete({ data: options });
});
</script>
</body>
</html>

希望这有帮助。

关于javascript - Materializecss 自动完成没有元素出现 1.0.0 没有 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52674847/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com