Question

我有2个列表。当我在第一个中选择一个值时，它将更新第二个列表中的选项。只有第二个列表是Select2。

我让它工作了，但是Select2的搜索功能不起作用。

如果我检查DOM，则会注意到Select2生成的选项没有文本。是因为搜索不起作用？

这是我的JS代码：

$('.category').change(function(event) {
    var measure = $(this).parents('.row').find('.measure');

    // Modify placeholder when searching
    measure.prop('disabled', true).select2({placeholder: "Searching..."});

    // Remove existing options of the list (of a previous usage)
    measure.children('option').each(function(index, el) {
        if ($(el).val().length > 0)
            $(el).remove();
    });

    var DATA = 'tagcat=' + $(this).val();

    $.ajax({
        type    : "GET",
        url     : $('.custom-table-container').data('search-js'),
        data    : DATA,
        cache   : false,
        success : function(response) {
            var data = JSON.parse(response);

            // Update the measures list    
            measure.select2({
                allowClear       : true,
                data             : data.items,
                escapeMarkup     : function (markup) { return markup; },
                templateResult   : formatTag,
                templateSelection: formatTagSelect
            }).prop('disabled', false);
        }
    });
});

我能够通过手动添加列表中的HTML选项使搜索工作正常，但是我松开了结果模板...

代码：

$.ajax({
    // ...
    success : function(response) {
        var data = JSON.parse(response);

        data.items.forEach(function(tag) {
            // create the option and append to Select2
            var option = new Option(tag.name, tag.id, false, false);
            measure.append(option);
        });

        measure.select2({
            allowClear          : true,
            data                : data.items,
            escapeMarkup        : function (markup) { return markup; },
           templateResult       : formatTag,
           templateSelection    : formatTagSelect
        }).prop('disabled', false);
    }
});

我该如何编码以同时具有模板和搜索功能？

Answer 1

对不起，我刚刚发现我错了：我没有在模板结果函数中显示正确的数据。

因此，在某种情况下它之所以有效，是因为不存在特定的数据，而在另一种情况下，该数据却代替了我所做的特定模板...在星期五的下午工作不是很有效。：D

因此，正确的方法是在DOM中手动添加select的选项，然后在其后初始化Select2。

class MainActivity : AppCompatActivity(), View.OnClickListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //setSupportActionBar(findViewById(R.id.my_toolbar))

        button.setOnClikListener(this)

        fab.setOnClickListener { view ->
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show()
        }
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        // Inflate the menu; this adds items to the action bar if it is present.
        menuInflater.inflate(R.menu.menu_main, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        return when (item.itemId) {
            R.id.action_settings -> true
            else -> super.onOptionsItemSelected(item)
        }
    }

    override fun onClick(v: View?) {
        var str = editText2.text.toString()
        var dex = editText.text.toString()
        var int = editText4.text.toString()

        when (v.id) {
            R.id.button -> {
                //add write sharedPreferences
            }
        }
    }
}

Select2依赖下拉列表，带有模板和搜索

1 个答案: