Семантический пользовательский интерфейс поиска и локального поиска не работает

У меня есть простой html, где я пытаюсь найти html модуля поиска Semantic 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 должен измениться Ui поиска фокуса, а результаты div также должен измениться. (Я на основе его, что DOM должен сделать из этого http://semantic-ui.com/modules/search.html#local-search)

Он должен показать результаты, как пользователь печатает, но мой HTML-файл не показывает ничего, но панель поиска :(

It должно быть так:. 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

Семантический пользовательский интерфейс поиска и локального поиска не работает

ответ

Смежные вопросы