Behat select2 ajax 关闭搜索框答案

【问题标题】：Behat select2 ajax closes the search boxBehat select2 ajax 关闭搜索框
【发布时间】：2016-11-19 16:31:59
【问题描述】：

我想用 Behat 测试一个 select2 保管箱，它会进行 ajax 调用以获得结果。问题是，在我填充 select2 的搜索框后，下拉菜单会立即关闭，因此搜索不会发生。

如果已经填充了选择项（带有预定义值的普通下拉菜单），一切正常，因为所有数据都在那里并且它会立即获取。

我在我的项目中使用Behat Page object，所以这是我的方法：

select2FieldPopulate

public function select2FieldPopulate($field, $value)
{
    $select2Field = $this->find('css', '.'.$field);

    //check if select2Field exists
    if (!$select2Field) {
        throw new \Exception(sprintf("Field %s was not found", $field));
    }

    $select2Field->click();

    $select2Input = $this->find('css', '.select2-drop.select2-drop-active .select2-search input.select2-input');

    if (!$select2Input) {
        throw new \Exception(sprintf("Field %s was not found", "select2-input"));
    }

    $select2Input->setValue($value);
}

js

function buildSelect2Element(selector, placeholder, url) {
    var element = $(selector).select2({
        placeholder: placeholder,
        minimumInputLength: 3,
        ajax: {
            url: url,
            dataType: 'json',
            data: function (term) {
                return {
                    q: term
                }
            },
            results: function (data) {

                //workarround to fix select2
                var results = [];
                $.each(data, function (index, item) {
                    results.push({
                        id: item.id,
                        text: item.name
                    });
                });
                return {
                    results
                }
            }
        }
    });

    return element;
}

在$select2Input->setValue() 上，搜索框会填充该值，但搜索不会发生，因为下拉菜单会立即关闭。

所以问题是：有没有办法强制盒子保持打开状态直到显示结果（ajax 调用完成）？

【问题讨论】：

选择应该像手动一样，您可能需要模拟输入（键盘按下）而不是设置值。此外，您可能希望有一个方法来查找元素并在找到时返回对象或抛出异常，而不是在每个元素/动作所需的方法中处理它。
好的，我设法使用select2('search', 'key') 进行搜索，但现在我被困在如何点击突出显示的值上......

标签： ajax symfony behat select2

【解决方案1】：

我设法让它在 select2 v4.x 下工作。

我在 js 中添加了关闭时选择的选项，如下所示：

js

function buildSelect2Element(selector, placeholder, url) {
    var element = $(selector).select2({
        theme: "classic",
        placeholder: placeholder,
        minimumInputLength: 3,
        selectOnClose: true, //HERE

然后在我的测试中我使用了 evaluateScript 方法：

select2FieldPopulate 方法

$this->getDriver()->evaluateScript("$('#your_select2_element').select2('open')");
$this->getDriver()->evaluateScript("$('.select2-search__field').val('". $value ."').keyup();");
$this->getDriver()->evaluateScript("$('#your_select2_element').select2('close')");

【讨论】：