<select name="parent" id="parent_id" class="selectpicker">
    {% if object.parent%}
    <option value="{{object.parent.pk}}" selected>{{object.parent.description}}</option>
    {% endif %}
</select>

{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static "css/bootstrap-select.min.css" %}"/>
    <link rel="stylesheet" href="{% static "css/ajax-bootstrap-select.css" %}"/>
{% endblock %}

{% block preload_js %}
    <script src="{% static "js/bootstrap-select.js" %}"></script>
    <script src="{% static "js/ajax-bootstrap-select.js" %}"></script>
{% endblock %}

{% block js %}
{{ js.super }}
<script>
$('#parent_id')
    .selectpicker({
        liveSearch: true
    })
    .ajaxSelectPicker({
        ajax: {
            url: '{% url 'asset_search_json'%}',
            type: "get",
            data: function () {
                var params = {
                    {% verbatim %}query: '{{{q}}}'{% endverbatim  %}
                };
                return params;
            }
        },
        locale: {
            emptyTitle: 'Search for item...'
        },
        preprocessData: function(data){
            var assets = [];
            if(data.length){
                var len = data.length;
                for(var i = 0; i < len; i++){
                    var curr = data[i];
                    assets.push(
                        {
                            'value': curr.id,
                            'text': curr.label,
                            'disabled': false
                        }
                    );
                }
                assets.push(
                {
                    'value': null,
                    'text': "No parent"
                });
            }
            
            return assets;
        },
        preserveSelected: false
    });
</script>
{% endblock js %}