Как использовать Select2 Ajax в Symfony в сочетании с Twig - PullRequest
0 голосов
/ 20 февраля 2019

Я пытаюсь использовать Select2 Ajax на моей HTML-странице для поиска по моему набору данных.У меня несколько ошибок:

  • Панель поиска практически не видна
  • Если не отображаются какие-либо данные

ProductController

/**
 * @Route("/api/product/v1/select2search", name="api_product_search")
 */
public function viewAction()
{

    $products = $this->productRepository->findAll();

    foreach ($products as $entity) {
        $response1[] = array(
            'id' => $entity['id'],
        );
        $response2[] = array(
            'name' => $entity['name'],
        );
    }

    return new JsonResponse(([$response1,$response2]));
}

Файл моей ветки:

{% extends 'base.html.twig' %}


{% block body %}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- select2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/gh/ttskch/select2-bootstrap4-theme@master/dist/select2-bootstrap4.min.css" rel="stylesheet">




    <select class="js-data-example-ajax"></select>
<script>
        $('.js-data-example-ajax').select2({
            ajax: {
                url: 'http://127.0.0.1:8000/api/product/v1/select2search',
                dataType: 'json'
                // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
            }
        });
    </script>

{% endblock %}

Текущий визуальный экран:

enter image description here Вы не можете видеть полосу, как описано выше.

Моя цель заключается в следующем:

enter image description here

...