如何在CodeIgniter中实现带自动补全的输入/下拉选择框

Got it, the CodeIgniter form helper doesn't have a built-in autocomplete input component, so we'll need to pair it with front-end solutions. Here are two practical approaches tailored to your scenario:

This is the simplest option if you don't want to add extra JS libraries. It leverages native browser autocomplete with a hidden list of options.

Replace your existing form_dropdown code block with this:

<div class="col-lg-3">
    <label class="control-label">
        <?php echo $required_notice . $val_option['option'] ?>
        <?php if(!empty($options_lang[$key][$key_option]->hint)):?>
            <i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i>
        <?php endif;?>
    </label>
    <div class="controls">
        <?php 
        // Keep your original option data logic
        if (isset($options_lang[$key][$key_option])) { 
            $drop_options = array_combine(
                explode(',', check_combine_set(isset($options_lang[$key]) ? $options_lang[$key][$key_option]->values : '', $val_option['values'], '')), 
                explode(',', check_combine_set($val_option['values'], isset($options_lang[$key]) ? $options_lang[$key][$key_option]->values : '', ''))
            ); 
        } else { 
            $drop_options = array(); 
        } 
        $drop_selected = set_value('option' . $val_option['id'] . '_' . $key, isset($estate['option' . $val_option['id'] . '_' . $key]) ? $estate['option' . $val_option['id'] . '_' . $key] : '');
        
        // Generate unique ID for datalist
        $datalist_id = 'datalist_' . $key . '_' . $val_option['id'];
        ?>

        <!-- Autocomplete input -->
        <?php echo form_input(
            'option' . $val_option['id'] . '_' . $key,
            $drop_selected,
            'class="form-control" id="inputOption_' . $key . '_' . $val_option['id'] . '" placeholder="' . $val_option['option'] . '" list="' . $datalist_id . '" ' . $required_text
        ) ?>

        <!-- Hidden datalist with options -->
        <datalist id="<?php echo $datalist_id ?>">
            <?php foreach ($drop_options as $value => $label): ?>
                <option value="<?php echo htmlspecialchars($value) ?>"><?php echo htmlspecialchars($label) ?></option>
            <?php endforeach; ?>
        </datalist>
    </div>
</div>

Pros: No external dependencies, works out of the box with modern browsers.
Cons: Limited styling control, and page load may slow down if you have thousands of options.

If you have a huge number of options, asynchronous loading is better to avoid bloating the page. jQuery UI's Autocomplete component handles this smoothly.

Step 1: Add a controller method to return options as JSON #

Add this to your existing controller to fetch options dynamically:

public function get_autocomplete_options() {
    // Get parameters from the AJAX request
    $search_term = $this->input->get('term');
    $key = $this->input->get('key');
    $val_option_id = $this->input->get('val_option_id');

    // Reuse your existing option logic (adjust as needed for database queries if applicable)
    if (isset($options_lang[$key][$key_option])) { 
        $drop_options = array_combine(
            explode(',', check_combine_set(isset($options_lang[$key]) ? $options_lang[$key][$key_option]->values : '', $val_option['values'], '')), 
            explode(',', check_combine_set($val_option['values'], isset($options_lang[$key]) ? $options_lang[$key][$key_option]->values : '', ''))
        ); 
    } else { 
        $drop_options = array(); 
    }

    // Filter options by search term (optional but recommended)
    $filtered_options = array_filter($drop_options, function($label) use ($search_term) {
        return stripos($label, $search_term) !== false;
    });

    // Format for jQuery UI Autocomplete
    $result = [];
    foreach ($filtered_options as $value => $label) {
        $result[] = ['value' => $value, 'label' => $label];
    }

    echo json_encode($result);
    exit;
}

Step 2: Update your form input and add JS #

Replace your form block with this, and include the jQuery UI resources:

<div class="col-lg-3">
    <label class="control-label">
        <?php echo $required_notice . $val_option['option'] ?>
        <?php if(!empty($options_lang[$key][$key_option]->hint)):?>
            <i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i>
        <?php endif;?>
    </label>
    <div class="controls">
        <?php 
        $drop_selected = set_value('option' . $val_option['id'] . '_' . $key, isset($estate['option' . $val_option['id'] . '_' . $key]) ? $estate['option' . $val_option['id'] . '_' . $key] : '');
        ?>

        <!-- Autocomplete input -->
        <?php echo form_input(
            'option' . $val_option['id'] . '_' . $key,
            $drop_selected,
            'class="form-control" id="inputOption_' . $key . '_' . $val_option['id'] . '" placeholder="' . $val_option['option'] . '" ' . $required_text
        ) ?>
    </div>
</div>

<!-- Include jQuery and jQuery UI (add these in your template's head or before closing body tag) -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {
    $('#inputOption_<?php echo $key . '_' . $val_option['id'] ?>').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '<?php echo site_url('your_controller_name/get_autocomplete_options') ?>',
                data: {
                    term: request.term,
                    key: '<?php echo $key ?>',
                    val_option_id: '<?php echo $val_option['id'] ?>'
                },
                dataType: 'json',
                success: function(data) {
                    response(data);
                }
            });
        },
        minLength: 2, // Trigger search after 2 characters typed
        select: function(event, ui) {
            $(this).val(ui.item.value); // Set the input to the selected value
            return false;
        }
    });
});
</script>

Pros: Handles large datasets via async loading, fully customizable styling, and supports advanced features like keyboard navigation.
Cons: Requires jQuery and jQuery UI dependencies.

内容的提问来源于stack exchange，提问作者Carlvic Lim