Элемент поиска Semantic-UI возвращает TypeError - PullRequest
Новая
       14

Элемент поиска Semantic-UI возвращает TypeError

0 голосов
/ 07 ноября 2018

Я пытаюсь получить поиск в семантическом интерфейсе пользователя Использование различных полей ответа функция работает.

Когда я пытаюсь использовать поиск, я получаю это:

enter image description here

, а не это:

enter image description here

Заголовок страницы содержит: 

<!-- Semantic UI-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Semantic UI-->
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

Я определил поиск в теле страницы, включая готовый к работе скрипт: 

<script type="text/javascript">
$(document).ready(function(){
  console.log('ready');
  console.debug('steady');

  $('.ui.search')
    .search({
      apiSettings: {
        url: '//api.github.com/search/repositories?q={query}'
      },
      fields: {
        results : 'items',
        title   : 'name',
        url     : 'html_url'
      },
      minCharacters : 3
    });

});
</script>
<div class="ui search">
  <div class="ui left icon input">
    <input class="prompt" type="text" placeholder="Search GitHub">
    <i class="github icon"></i>
  </div>
</div>

В консоли браузера выдается ошибка:

TypeError: P.ajax не является функцией [Узнать больше]

enter image description here

** редактировать **

Я провел установку и сборку Semantic UI, следуя инструкциям .

Я переместил содержимое папки dist в папку public моего приложения, которая теперь напоминает:

enter image description here

Я изменил ссылку на страницу, добавив нужные компоненты: 

<link rel="stylesheet" type="text/css" href="semantic.min.css">
<link rel="stylesheet" type="text/css" href="components/search.min.css">
<script src="semantic.min.js"></script>
<script src="components/search.min.js"></script>

Теперь я получаю другую ошибку типа:

enter image description here

** / редактировать **

Что мне не хватает?

1 Ответ

0 голосов
/ 08 ноября 2018

Я использовал уменьшенную версию jQuery: 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Когда я переключился на обычную версию: 

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

Поиск работал как ожидалось.

...