如何使用codeigniter表单进行输入/下拉列表

Question

I'm using a codeigniter and use form_help for form. I have a dropdown list but I have a lot of data from my dropdown list so I want to make a input a text and autodetect values on dropdown list.

I use this guide https://www.codeigniter.com/userguide3/helpers/form_helper.html but I cannot find my solution.

check this reference for desire output

My result and code

 <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
                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] : '');

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

Result

Thankyou !

Answer 1

The below code is worked for me. You can use select2.js for your requirement. See this website.

This is just an example that may help you. You have just to set CI select with this js. The class of form select would be same in your $('.class_of_your_select').select2({.

In header,

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

In your form,

<select class="js-example-basic-single">

    <option>ABC</option>
    <option>BCD</option>
    <option>CDE</option>
    <option>DEF</option>
    <option>EFG</option>
    <option>FGh</option>

</select>

In your footer,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<script type="text/javascript">
$('.js-example-basic-single').select2({
  placeholder: 'Select an option'
});  
</script>