Question

我想用Behat测试一个select2 dropbox进行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调用结束）？

Answer 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')");

Behat select2 ajax关闭搜索框

1 个答案: