Input Tags Template for my Custom FieldType

Question

I created a custom FieldType that gathers data from 2 different Models. I was able to successfully display it as a Drop Down. My problem now is that there are tooo many records on my array and I would like to have a search instead similar to what craft already has implemented on the Tags Field.

My current template is:

    {%- set class = [
    'select',
    (class is defined ? class : null)
    ]|filter|join(' ') %}

    {% set selectedValue = (value is defined ? value : null)  %}

    <div class="{{ class }}">
        <select {%- if name is defined %} name="{{ name }}"{% endif %}>
    {% if value is not null %}
    {% set selectedValue = value.id %}
    {% endif %}
    {% else %}
    <option value="0" > </option>
    {% endif %}

    {% for test in tests %}
    {% set optionValue = test.id %}
    <option value="{{test.id}}" {% if optionValue == selectedValue %} selected{% endif %}>Test - {{ test.name }}: {{ test.price }}</option>
            {% endfor %}
        </select>
    </div>

Any way I can make it similar to the craft/app/templates/_components/fieldtypes/Tags/input.html

Answer 1

You could use Select2 to search in a select field

$(document).ready(function() {
    $('.my-custom-awesome-select-class').select2();
});

All you need to do is to include the js file via asset bundle or register it in your view directly and execute the JS code