語義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搜索和本地搜索不起作用

回答

相關問題