javascript - 如何在语义 ui 中的文本框中创建自动完成

标签 javascript jquery angularjs user-interface semantic-ui

我正在使用语义 UI 自动完成文本框。

$(document).ready(function(search) {
    $('.ui.search')
        .search({
            source: content
        });
    var content = [{
        title: 'Andorra'
    }, {
        title: 'United Arab Emirates'
    }, {
        title: 'Afghanistan'
    }, {
        title: 'Antigua'
    }, ];
});

这是我在 Semantic UI 网站上使用的代码,但我在控制台中收到错误,

Uncaught TypeError: $(...).search is not a function

我做错了什么?

最佳答案

请尝试以下代码是否对您有帮助。

<!DOCTYPE html>
<html>
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css" rel="stylesheet"/>  
    <script type="text/javascript">

        $(document).ready(function () {
            var content = [{
                title: 'Andorra'
            }, {
                title: 'United Arab Emirates'
            }, {
                title: 'Afghanistan'
            }, {
                title: 'Antigua'
            },];

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

        });
    </script>

</head>
<body>
<div class="ui search">
    <div class="ui icon input">
        <input class="prompt" placeholder="Search countries..." type="text">
        <i class="search icon"></i>
    </div>
    <div class="results"></div>
</div>
</body>
</html>

关于javascript - 如何在语义 ui 中的文本框中创建自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38281727/

相关文章:

javascript - 如何根据函数参数选择元素的数据集?

javascript - 设置::after的样式等于被选元素的样式

javascript - React Native 中的 Arraylist 添加/删除 View

javascript - 如何在只读 Polymer 1.x 属性中设置子属性

jquery - 全日历,悬停对天数的影响

javascript - 有什么方法可以在angular js的ng-repeat中声明和增加一个变量

javascript - 使用 src 引用 Javascript 或直接将其注入(inject) HEAD 在性能和内存占用方面的差异

javascript - 如何在 5 分钟不活动后更改页面位置

html - 为什么最新版本的angular不支持全局 Controller 功能?

javascript - AngularJS 中的嵌套表单