جایگزین پیشرفته select box ، کتابخانه select2

سلام وقت بخیر 

برای انجام یک پروژه نیاز داشتم  selectbox رو خیلی کاستوم کنم که با این کتابخونه آشنا شدم.خیلی خوبه آسونه اما شاید بعضی از جاهاش برای بار اول اذیتتون کنه اما خیلی چیز روالیه 

روش استفاده : بعد از اینکه cdn اون رو اضافه کردید با این چند خط کد میتونید اون رو داخل پروژه خودتون استفاده کنید.

$(".select2_category").select2({

        ajax: {
            url: "http://127.0.0.1:8000/api/categories/",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {

                params.page = params.page || 1;

                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 18) < data.count
                    }
                };
            },
            cache: true
        },
        placeholder: 'انتخاب تصویر اصلی',
        templateResult: formatCategory,
        templateSelection: formatCategorySelection
    });

    function formatCategory(category) {
        if (category.loading) {
            return category.title;
        }
        return category.title || category.text;
    }

    function formatCategorySelection(category) {
        
    
        return category.title || category.text;
    } 

اضافه کردن selectboxدر کد html 

 <label>دسته بندی</label><br>
        <select class="form-control select2 select2_category"  style="width: 100%;">
  </select>

توضیحات بیشتر در دایکومنت select2