Question

我有一个简单的html，我正在尝试语义UI的搜索模块的html，它只是不起作用。这是代码：

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
    <script src="../../assets/javascripts/testing.js" type="text/javascript"></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.search')
  .search({
   source: content,
});

var content = [
  { title: 'Andorra' },
  { title: 'United Arab Emirates' },
  { title: 'Afghanistan' },
  { title: 'Antigua' },
  { title: 'Anguilla' },
  { title: 'Albania' },
  { title: 'Armenia' },
  { title: 'Netherlands Antilles' },
  { title: 'Angola' },
  { title: 'Argentina' },
  { title: 'American Samoa' },
  { title: 'Austria' },
  { title: 'Australia' },
  { title: 'Aruba' },
  { title: 'Aland Islands' },
  { title: 'Azerbaijan' },
  { title: 'Bosnia' },
  { title: 'Barbados' },
  { title: 'Bangladesh' },
  { title: 'Belgium' },
  { title: 'Burkina Faso' },
  { title: 'Bulgaria' },
  { title: 'Bahrain' },
  { title: 'Burundi' }
  // etc
];

它应该做的是，一旦我点击搜索框，ui搜索的DOM应该更改为ui搜索焦点，结果div也应该更改。（我根据DOM http://semantic-ui.com/modules/search.html#local-search）

做了什么

它应该在用户输入时显示结果，但我的html文件没有显示任何内容，但是搜索栏：（

应该是这样的：image

Answer 1

以下代码应该是自包含的。看来你必须使用document.ready，然后才行。

<!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>

语义UI搜索和本地搜索不起作用

1 个答案: