如何在指定输入框值变化时为Kartik Select2通过AJAX加载数据

Got it, let's sort this out. You want Kartik's Select2 to load data via AJAX only when a specific input (like #input_first) changes—here's a clean, working implementation for Yii2:

Step 1: Set up the Select2 widget #

First, initialize the Select2 with empty initial data, and configure the AJAX call to depend on your target input's value. We'll also give it a clear ID to make JS manipulation easier:

<?= $form->field($model, 'id_list')->widget(Select2::classname(), [
    'data' => [], // Start with no data
    'theme' => Select2::THEME_BOOTSTRAP,
    'options' => [
        'placeholder' => 'Select a List',
        'id' => 'id-list-select2' // Explicit ID for JS access
    ],
    'pluginOptions' => [
        'allowClear' => true,
        'ajax' => [
            'url' => Url::to(['/list']),
            'dataType' => 'json',
            'delay' => 250, // Add small delay to avoid excessive requests
            'data' => new JsExpression('function(params) {
                // Only send request if #input_first has a value
                const triggerValue = $("#input_first").val();
                if (!triggerValue) return {}; // Empty object = no AJAX call
                
                return {
                    q: params.term, // Pass Select2's search term to backend
                    trigger_input: triggerValue // Pass the input value your backend needs
                };
            }'),
            'processResults' => new JsExpression('function(data) {
                // Format backend response for Select2
                return {
                    results: data.map(item => ({id: item.id, text: item.name}))
                };
            }'),
            'cache' => true
        ],
        'minimumInputLength' => 0, // Allow loading data without user typing (adjust if needed)
    ],
]); ?>

Step 2: Add JavaScript to trigger updates on input change #

Now, bind a change event to your target input. When it updates, we'll reset the Select2 and trigger a new data load:

$(document).ready(function() {
    // Watch for changes on your trigger input
    $("#input_first").on("change", function() {
        const select2Instance = $("#id-list-select2").data("select2");
        
        // Clear any existing selection
        select2Instance.val(null).trigger("change");
        
        // Trigger a new AJAX request if the input has a value
        const inputValue = $(this).val();
        if (inputValue) {
            // Trigger a query with empty term to load all matching data
            select2Instance.trigger("query", {term: ""});
        }
    });
});

Key Notes: #

• Control AJAX triggers: The data function in the AJAX config ensures Select2 only sends requests when #input_first has a value. No value = no request, which is exactly what you want.
• Reset on input change: When the trigger input updates, we clear the Select2 to avoid stale selections and load fresh data matching the new input value.
• Backend setup: Your /list controller action needs to accept the trigger_input parameter (or whatever name you use) and return the filtered data as JSON.

Optional Adjustments: #

• If you want users to type a search term before loading data, change minimumInputLength to 1 or higher.
• If you don't need to load all data on input change (only when the user searches), remove the select2Instance.trigger("query", {term: ""}) line—Select2 will only load data when the user starts typing.

内容的提问来源于stack exchange，提问作者Arturo Verbel De León