How to make HTML select options searchable

Question

How to make HTML select options searchable

My display name

2022年1月18日 14:09

What could be easy way to modify source and to make that Select options searchable for attributes in product page? Something like while I typing, it suggest value.

div id=product_attributes class=panel wc-metaboxes-wrapper hidden
div class=toolbar toolbar-top
    span class=expand-close
        a href=# class=expand_all?php esc_html_e( 'Expand', 'woocommerce' ); ?/a / a href=# class=close_all?php esc_html_e( 'Close', 'woocommerce' ); ?/a
    /span
    select name=attribute_taxonomy class=attribute_taxonomy
        option value=?php esc_html_e( 'Custom product attribute', 'woocommerce' ); ?/option
        ?php
        global $wc_product_attributes;

        // Array of defined attribute taxonomies.
        $attribute_taxonomies = wc_get_attribute_taxonomies();

        if ( ! empty( $attribute_taxonomies ) ) {
            foreach ( $attribute_taxonomies as $tax ) {
                $attribute_taxonomy_name = wc_attribute_taxonomy_name( $tax-attribute_name );
                $label                   = $tax-attribute_label ? $tax-attribute_label : $tax-attribute_name;
                echo 'option value=' . esc_attr( $attribute_taxonomy_name ) . '' . esc_html( $label ) . '/option';
            }
        }
        ?
    /select
    button type=button class=button add_attribute?php esc_html_e( 'Add', 'woocommerce' ); ?/button
/div

Topic select taxonomy Wordpress

Category Web

My display name · Accepted Answer · 2022年1月18日 14:09

Answer would be:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<div id="product_attributes" class="panel wc-metaboxes-wrapper hidden">
<div class="toolbar toolbar-top">
<span class="expand-close">
<a href="#" class="expand_all"><?php esc_html_e( 'Expand', 'woocommerce' ); ?></a> / <a href="#" class="close_all"><?php esc_html_e( 'Close', 'woocommerce' ); ?></a>
</span>
<select name="attribute_taxonomy" class="attribute_taxonomy js-ao-select-options">
<option value=""><?php esc_html_e( 'Custom product attribute', 'woocommerce' ); ?></option>
<?php
global $wc_product_attributes;
$attribute_taxonomies = wc_get_attribute_taxonomies();
if ( ! empty( $attribute_taxonomies ) ) {
foreach ( $attribute_taxonomies as $tax ) {
$attribute_taxonomy_name = wc_attribute_taxonomy_name( $tax->attribute_name );
$label                   = $tax->attribute_label ? $tax->attribute_label : $tax->attribute_name;
echo '<option value="' . esc_attr( $attribute_taxonomy_name ) . '">' . esc_html( $label ) . '</option>';
}} ?>
</select>
<script>
jQuery(document).ready(function($){
$('.js-ao-select-options').select2();
});
</script>
<button type="button" class="button add_attribute"><?php esc_html_e( 'Add', 'woocommerce' ); ?></button>

After submiting from Select area, width getting smaller value, so I directly modified CSS (Plugin/Woocomerce/admin.css) to get it better, but usualy shouldn't be modified directly as I did. This part is responsable for width of Select area:

.select2-container .select2-selection--single .select2-selection__rendered{line-height:40px;padding-right:24px;width:500px;}

How to make HTML select options searchable

About