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

我有一个简单的html，我尝试了Semantic UI的搜索模块的html，它不会工作。下面是代码：语义UI搜索和本地搜索不起作用

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

什么应该做的是，一旦我点击搜索框，用户界面中搜索的DOM应更改为UI的搜索焦点，并将结果div也应该改变。（我以它关闭哪些DOM应该做到这一点http://semantic-ui.com/modules/search.html#local-search）

它应该显示结果作为用户键入的，但我的HTML文件不显示任何东西，但搜索栏:(

它应该是这样的：image

来源

2017-01-03 limciana

移动内容的声明是搜索设置之前。 .. – Kinnza

下面的代码应该是独立的，看来你必须使用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>

来源

2017-04-29 02:30:27

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

回答

相关问题