我只想在写时显示选项标签:select2

时间:2018-09-13 12:02:32

标签: php jquery jquery-select2

我使用select2 html option,我只想在写时显示options标签。例如,当我写“ a”时,所有页面的名字显示都为a,但是当我单击时,我什么都没写。

我使用jquery,当我单击时隐藏了选项标签,但是当我更改输入并写入选项时却不显示。

<?php
     global $wpdb;
            $post_id = $wpdb->get_results("SELECT `ID`,`post_title` FROM $wpdb->posts WHERE `post_type` = 'page' and `post_status` = 'private'");

    ?>
    <div class="form_search_custom">
            <div id="myDropdown" class="dropdown-content">
                <label class="col-md-3 control-label" for="service"><?php echo $lang['department']; ?> </label>
                <div class="col-md-8">
              <select name="services[]" id="service" class="form-control select2-multiple" multiple>
                  <?php if ( !empty( $post_id ) ) {
                            foreach ($post_id as $value) {
                    ?>
                  <option value="<?php echo($value->ID);?>"><?php echo($value->post_title);?></option>
                 <?php
                        }
                        }               
                 ?>
              </select>
            </div>
        </div>   </div>

        <script>
                jQuery(document).ready(function() {
                     jQuery('#service').select2();

                     jQuery('.select2-selection').on('click', function() {
                        jQuery('.select2-dropdown').hide();
                    }); 

                    var option_val = "";

                    /*jQuery('.').on('change', function() {
                        jQuery('.select2-dropdown').show();
                        option_val = jQuery('.select2-search__field').val();
                        alert(option_val)
                    });
                    jQuery('.select2-search__field').val(option_val);
                    */

                    jQuery('.select2-search__field').change(function() {
                    jQuery('.select2-dropdown').show();
                    var filter = jQuery(this).val();
                    jQuery('option').each(function() {
                      if (jQuery(this).val() == filter) {
                        jQuery(this).show();
                      } else {
                        jQuery(this).hide();
                      }
                      jQuery('select').val(filter);
                    })
                  })
                });     

        </script>

1 个答案:

答案 0 :(得分:0)

您可以传递显示搜索和显示数据所需的最小字母数

$('#service').select2({
    minimumInputLength: 2,
    tags: true
});