Question

当我使用select2时，搜索时选择列表不会减少，当我有超过50个选择时，这很烦人。

我使用symfony4框架，其路由提供了我在DB中的标签：

/**
 * @Route("/miseenpage/keywords.json", name="keywords", defaults={"_format": "json"})
 */

然后，我用symfony Tags plugin提供的代码初始化我的select2：

$( document ).ready(function() {
    initTags($('input[name$="[tagsText]"]'));
});

// TAGS
function initTags($input) {
    if($input.length) {
        $input.attr('type', 'hidden').select2({
            width: '85%',
            tags: true,
            tokenSeparators: [","],
            createSearchChoice: function (term, data) {
                if ($(data).filter(function () {
                    return this.text.localeCompare(term) === 0;
                }).length === 0) {
                    return {
                        id: term,
                        text: term
                    };
                }
            },
            multiple: true,
            ajax: {
                url: $input.data('ajax'),
                dataType: "json",
                data: function (term, page) {
                    return {
                        q: term
                    };
                },
                results: function (data, page) {
                    return {
                        results: data
                    };
                }
            },
            initSelection: function (element, callback) {
                var data = [];

                function splitVal(string, separator) {
                    var val, i, l;
                    if (string === null || string.length < 1) {
                        return [];
                    }
                    val = string.split(separator);
                    for (i = 0, l = val.length; i < l; i = i + 1) {
                        val[i] = $.trim(val[i]);
                    }
                    return val;
                }

                $(splitVal(element.val(), ",")).each(function () {
                    data.push({
                        id: this,
                        text: this
                    });
                });
                callback(data);
            }
        });
    }
}

在搜索之前，这是我网页上的结果：

在这里搜索之后：

如您所见，列表仍然相同，只是结果带有下划线。我想根据搜索内容过滤结果，因此在找到带下划线的字词之前，不必一直滚动。

因为它是Select2的基本工作，所以我想我的JS中存在配置问题。

Answer 1

我在加载时实例化了此值：

let currentSearch = false;

然后，我更改了JS的“ AJAX”部分，以使它以搜索到的值在列表中循环：

        ajax: {
            url: $input.data('ajax'),
            dataType: "json",
            data: function (term) {
                currentSearch = term;
                return {
                    q: term
                };
            },
            results: function (data) {
                let returnTab = [];
                data.forEach(function(e) {
                    if(e.text.includes(currentSearch)){
                        returnTab.push(e);
                    }
                });
                return {
                    results: returnTab
                };
            }
        },

我很确定有一种更干净/更简单的方法，但是暂时可以解决。

Answer 2

只是一个带有一些代码的基本示例，以展示我们如何在Ajax中使用Select2（v4.0.3，3.5可能大不相同）

在树枝上，例如：

$("#users").css('width', '100%').select2({
            minimumInputLength: 3,
            ajax: {
                url: "{{ path('api_search_user') }}",
                dataType: 'json',
                delay: 500,
                data: function (params) {
                    return {
                        needle: params.term // Here we send user input to the controller
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: false
            }
        });

我们有一个具有搜索用户功能的控制器：

/**
 * @Route("/search_users", name="api_search_users")
 * @param Request $request
 * @return JsonResponse
 */
public function searchUsersAction(Request $request)
{
    $needle = $request->get('needle'); // Here we retrieve user input
    $users = $this->get(User::class)->searchUsers($needle);
    return new JsonResponse($users );
}

在您最后发表评论之后，

编辑

此值无效

这是因为在formbuilder添加字段时，您的值不属于select。您必须在addEventListener上添加一个PRE_SUBMIT才能动态添加该值。您可以这样：

// Define form modifier
$usersFormModifier = function (FormInterface $form, $users) use ($options) {
    $choices = array();
    if(is_array($users)) {
        $choices = $users;
    }

    $form->add(
        'users',
        EntityType::class,
        array(
            'label' => 'conversation.form.users',
            'multiple' => true,
            'class' => 'AppBundle\Entity\Security\User',
            'choices' => $choices,
            'choice_label' => function (User $user) {
                return $user->getLastName() . " " . $user->getFirstName();
            },
            'attr' => array(
                'placeholder' => 'default.search_person'
            )
        )
    );
};

// On PRE_SET_DATA, we load users from our object (which only contains their IDs)
$builder->addEventListener(
    FormEvents::PRE_SET_DATA,
    function (FormEvent $event) use ($usersFormModifier) {
        $usersFormModifier($event->getForm(), $event->getData()->getUsers()->toArray());
    }
);

// On PRE_SUBMIT, we add the options, so the select will accept newly added values
$builder->addEventListener(
    FormEvents::PRE_SUBMIT,
    function (FormEvent $event) use ($usersFormModifier) {
        $data = $event->getData();

        $users = null;
        if(isset($data['users'])) {
            $users = $this->entityManager->getRepository('AppBundle:Security\User')->findBy(array('id' => $data['users']));
        }

        $usersFormModifier($event->getForm(), $users);
    }
);

正如我在开始时所说的，如果您没有太多标签，并且它们没有定期演变，则可以使用所有标签构建选择，并避免使用Select2 javascript代码的所有Ajax部分！（我认为这将使您的案件更容易且足够）

在select2下拉列表中缩小选择列表（搜索时）

2 个答案: