我想在我的Thymeleaf模板中使用自动完成jquery组件。Materializecss前端框架的自动完成功能如下所示:
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'http://placehold.it/250x250'
},
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.
});
如您所见,我需要一个包含元素列表的数据对象。我想从服务器端嵌入这个变量,因为这个列表是动态的。正如Thymeleaf留档所说
<script type="text/javascript" th:inline="javascript" th:src="@{/js/example.js}"></script>
基于留档,以下示例应该可以工作:
$('input.autocomplete').autocomplete({
data: [[${companies}]],
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.
});
问题是在这种情况下,Thymeleaf没有内联任何东西。嵌入服务器端变量或命令对象可以在Thymeleaf中正常工作,但我无法使其适用于javascript。我使用Spring Boot 1.5.4,Thymeleaf 3.0.2
th: inline="javascript"
仅在您的脚本是内联的情况下有效,即在之间的超文本标记语言模板中
如果您有一个单独的javascript文件和要在其中评估的Thymeleaf表达式,则需要使用JAVASCRIPT模板模式通过Thymeleaf单独处理该js文件。
匿名用户
$('input.autocomplete').autocomplete({
data: [($ {
companies
})], // use '(', ')'
limit: 20,
onAutocomplete: function(val) {},
minLength: 1
});
试试上面的代码。我也经历过。
相关问题
- 如何迭代Hashmap并与同一Hashmap中的其他键进行组合以比较它们的对象
- HashCode-如果相等的对象碰巧在同一个桶中散列会发生什么?
- 如何防止对数组中类对象的重复引用?
- Jest vanilla JavaScript JSDOM刷新失败,切换beforeAll到before每一个后的第二次测试中断
- 异步管道是否从服务中定义并从组件变量指向的可观察对象取消订阅?
- 使用订阅与异步管道时,同一可观察对象的不同结果
- 如果可观察对象使用异步管道,是否需要取消订阅?
- 我必须取消订阅ActivatedRoute(例如参数)可观察对象吗?
- Angular 2缓存超文本传输协议请求使用可观察对象的力量
- Angular服务的方法应该总是只返回可观察对象吗?
- 如果没有“订阅”类型的对象,如何取消订阅可观察?
- Angular可观察对象-如果没有订阅,我需要取消订阅吗?
- 如何取消订阅角度组件中的多个可观察对象?
- 如果可观察对象已完成,我是否需要取消订阅?
- RxJava:防止一个可观察对象发射,直到另一个可观察对象的数据被发射
- 可观察源对象被销毁时的内存泄漏
- 取消订阅RxJS可观察对象
- Spring Boot Thymeleaf白标签错误页面
- 对于所有对象类型T,sizeof(T)>=对(T)总是这样吗?
- Javascript中的不和音乐机器人