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

Question

我一辈子都想不出如何使语义-ui 搜索组件正常工作...

很多很多示例（语义-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;
}

带走：语义-ui喜欢成为镇上唯一的css！

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

Semantic-ui search local static variable, why no results?

javascript

css

jquery

semantic-ui

更新 1：

更新 2：