Question

不能为我的生活弄清楚如何让语义ui搜索组件正常工作......

很多很多例子（semantic-ui.com，jsfiddle等）让它看起来很简单。遵循这个简单的模式不会产生与所述例子相同的结果。

我尝试插入debugger语句并使用控制台在需要时检查变量是否存在，尝试将搜索组件js和css文件与其余语义js和css链接，同时尝试设置源代码，等等，手动search方法 - 没有运气。

这是我的搜索输入：

<div class="ui search">
    <div class="ui icon input" style="width: 100%;">
        <input class="prompt" type="text" placeholder="Search...">
        <i class="search icon"></i>
    </div>
    <div class="results"></div>
</div>

以下是同一页面上的js：

<script type="text/javascript">
    window.onload = function() {
        // Setup search
        var content = [
            { title: 'Andorra' },
            { title: 'United Arab Emirates' },
            { title: 'Afghanistan' },
            { title: 'Antigua' },
            { title: 'Anguilla' },
            { title: 'Albania' },
            { title: 'Armenia' }
        ];
        $('.ui.search')
            .search({
                type: 'standard',
                source: content,
                searchFields : ['title'],
            });
    }
</script>

请帮忙。谢谢。

更新1：

当我将jQuery选择器更改为.ui.input时，我得到某种类似的功能

$('.ui.input')
    .search({
        type: 'standard',
        source: content,
        searchFields : ['title'],
    });

但它看起来像这样......

更新2：

如果我保留jQuery选择器$('.ui.search')，则使用搜索结果更新DOM ，但仍未正确显示...

Answer 1

以下代码正常工作：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="js/search.css">
    <script src="js/search.js"></script>    
    <script type="text/javascript">
    window.onload = function() {
        // Setup search
        var content = [
            { title: 'Andorra' },
            { title: 'United Arab Emirates' },
            { title: 'Afghanistan' },
            { title: 'Antigua' },
            { title: 'Anguilla' },
            { title: 'Albania' },
            { title: 'Armenia' }
        ];
        $('.ui.search')
            .search({
                type: 'standard',
                source: content,
                searchFields : ['title'],
            });
    }
</script>
</head>
<head>
    <title>  Test  </title>
</head>
<body>
<div class="ui search">
    <div class="ui icon input" style="width: 100%;">
        <input class="prompt" type="text" placeholder="Search...">
        <i class="search icon"></i>
    </div>
    <div class="results"></div>
</div>

</body>
</html>

Answer 2

原来是一场css冲突。我在某些时候添加了以下内容来处理显示一些包含许多字段的表格数据。只需将其移除即可修复所有内容。

*, body {
    overflow-x: scroll;
}

TAKE AWAY ：semantic-ui喜欢成为城里唯一的css！

Semantic-ui搜索局部静态变量，为什么没有结果？

更新1：

更新2：

2 个答案: