Semantic-ui ищет локальную статическую переменную, почему нет результатов?

Не могу на всю жизнь понять, как заставить компонент поиска семантического пользовательского интерфейса работать правильно...

Многие, многие примеры (semantic-ui.com, jsfiddle и т. д.) делают его простым. Следование этому простому шаблону не дает таких же результатов, как в указанных примерах.

Я пытался вставить операторы debugger и использовать консоль, чтобы проверить, существуют ли переменные, когда это необходимо, попытался связать файлы js и css компонента поиска вместе с остальными семантическими js и css, также попытался установить источник и т. д. метод search вручную — безуспешно.

Вот мой поисковый запрос:

<div class="ui search">
    <div class="ui icon input" style="width: 100%;">
        <input class="prompt" type="text" placeholder="Search...">
        <i class="search icon"></i>
    </div>
    <div class="results"></div>
</div>

Вот js на той же странице ниже:

<script type="text/javascript">
    window.onload = function() {
        // Setup search
        var content = [
            { title: 'Andorra' },
            { title: 'United Arab Emirates' },
            { title: 'Afghanistan' },
            { title: 'Antigua' },
            { title: 'Anguilla' },
            { title: 'Albania' },
            { title: 'Armenia' }
        ];
        $('.ui.search')
            .search({
                type: 'standard',
                source: content,
                searchFields : ['title'],
            });
    }
</script>

Пожалуйста помоги. Спасибо.

ОБНОВЛЕНИЕ 1:

Я получаю некоторое сходство функциональности, когда я меняю селектор jQuery на .ui.input вот так

$('.ui.input')
    .search({
        type: 'standard',
        source: content,
        searchFields : ['title'],
    });

Но это выглядит так...

введите здесь описание изображения

ОБНОВЛЕНИЕ 2:

Если я сохраняю селектор jQuery $('.ui.search'), DOM обновляется результатами поиска, но все равно отображается неправильно...

введите здесь описание изображения


javascript jquery css semantic-ui
person conner.xyz    schedule 09.11.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Следующий код отлично работает для меня:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="js/search.css">
    <script src="js/search.js"></script>    
    <script type="text/javascript">
    window.onload = function() {
        // Setup search
        var content = [
            { title: 'Andorra' },
            { title: 'United Arab Emirates' },
            { title: 'Afghanistan' },
            { title: 'Antigua' },
            { title: 'Anguilla' },
            { title: 'Albania' },
            { title: 'Armenia' }
        ];
        $('.ui.search')
            .search({
                type: 'standard',
                source: content,
                searchFields : ['title'],
            });
    }
</script>
</head>
<head>
    <title>  Test  </title>
</head>
<body>
<div class="ui search">
    <div class="ui icon input" style="width: 100%;">
        <input class="prompt" type="text" placeholder="Search...">
        <i class="search icon"></i>
    </div>
    <div class="results"></div>
</div>

</body>
</html>
person Jaya Vishwakarma    schedule 09.11.2015
comment
<link rel="stylesheet" href="js/search.css"> и <script src="js/search.js"></script> файлы из semantic/dist/components/? - person conner.xyz; 10.11.2015

arrow_upward
0
arrow_downward

Оказывается, это конфликт css. В какой-то момент я добавил следующее, чтобы обрабатывать отображение некоторых табличных данных со многими полями. Простое удаление все исправило.

*, body {
    overflow-x: scroll;
}

ЗАБЕРИТЕ: semantic-ui любит быть единственным css в городе!

person conner.xyz    schedule 10.11.2015