セマンティックUIの検索とローカル検索が機能しない

シンプルなhtmlがあり、セマンティック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 
];

は、私は、検索ボックスをクリックすると、UI検索の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の検索とローカル検索が機能しない

答えて

関連する問題