Semantic-UI 的搜索元素 returns 类型错误
Semantic-UI's search element returns a TypeError
我正在尝试使用语义 UI 的搜索 Using Different Response Fields 功能。
当我尝试使用搜索时,我得到了这个:
而不是这个:
页面的 header 包含:
<!-- Semantic UI-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Semantic UI-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
我已经在页面的 body 中定义了搜索,包括 document-ready 脚本:
<script type="text/javascript">
$(document).ready(function(){
console.log('ready');
console.debug('steady');
$('.ui.search')
.search({
apiSettings: {
url: '//api.github.com/search/repositories?q={query}'
},
fields: {
results : 'items',
title : 'name',
url : 'html_url'
},
minCharacters : 3
});
});
</script>
<div class="ui search">
<div class="ui left icon input">
<input class="prompt" type="text" placeholder="Search GitHub">
<i class="github icon"></i>
</div>
</div>
在浏览器的控制台中出现错误:
TypeError: P.ajax is not a function[Learn More]
** 编辑 **
我按照 instructions.
完成了安装和构建 Semantic UI 的工作
我将 dist
文件夹的内容移动到我应用程序的 public
文件夹,现在类似于:
我修改了页面的引用以包含所需的组件:
<link rel="stylesheet" type="text/css" href="semantic.min.css">
<link rel="stylesheet" type="text/css" href="components/search.min.css">
<script src="semantic.min.js"></script>
<script src="components/search.min.js"></script>
现在我得到一个不同的类型错误:
** / 编辑 **
我错过了什么?
我用的是瘦身版的jQuery:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
当我切换到使用普通版本时:
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
搜索按预期进行。
我正在尝试使用语义 UI 的搜索 Using Different Response Fields 功能。
当我尝试使用搜索时,我得到了这个:
而不是这个:
页面的 header 包含:
<!-- Semantic UI-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Semantic UI-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
我已经在页面的 body 中定义了搜索,包括 document-ready 脚本:
<script type="text/javascript">
$(document).ready(function(){
console.log('ready');
console.debug('steady');
$('.ui.search')
.search({
apiSettings: {
url: '//api.github.com/search/repositories?q={query}'
},
fields: {
results : 'items',
title : 'name',
url : 'html_url'
},
minCharacters : 3
});
});
</script>
<div class="ui search">
<div class="ui left icon input">
<input class="prompt" type="text" placeholder="Search GitHub">
<i class="github icon"></i>
</div>
</div>
在浏览器的控制台中出现错误:
TypeError: P.ajax is not a function[Learn More]
** 编辑 **
我按照 instructions.
完成了安装和构建 Semantic UI 的工作我将 dist
文件夹的内容移动到我应用程序的 public
文件夹,现在类似于:
我修改了页面的引用以包含所需的组件:
<link rel="stylesheet" type="text/css" href="semantic.min.css">
<link rel="stylesheet" type="text/css" href="components/search.min.css">
<script src="semantic.min.js"></script>
<script src="components/search.min.js"></script>
现在我得到一个不同的类型错误:
** / 编辑 **
我错过了什么?
我用的是瘦身版的jQuery:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
当我切换到使用普通版本时:
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
搜索按预期进行。