آموزش پلاگین chosen و استفاده از آن در Laravel

سلام دوستان

گاهی توی فرم های HTML نیاز داریم که از تگ های select استفاده کنیم، اما خب همینطور که میدونید این تگ ها به صورت خام شکل خوبی ندارن و نمیشود از تمام قابلیت های اون استفاده کرد. بنابراین از پلاگین های کمک میگیریم. من خودم از chosen استفاده میکنم. ایشون پلاگین جی کوئری سبکی هستن که قابلیت های زیادی مثل سرچ، چند انتخابی و ... دارن. در تعریف این پلاگین آمده :

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly


Laravel
Laravel



داکیومنت این پلاگین و لینک دانلود آن هم در آدرس زیر هست. خب حالا بریم ببینیم چجوری از اون توی پروژهامون استفاده کنیم.

https://harvesthq.github.io/chosen/




1- مرحله اول دانلود پلاگین و Extract کردن آن و کپی اش در آدرس پروژه مون.

C:\xampp\htdocs\myLaravel\blog\public\plugins\chosen


2- مرحله دوم وارد کردن آدرس css و js در فایل "index.blade.php" و نوشتن ییلد در پایین js.

@yield('js')
آدرس فایل css
آدرس فایل css
آدرس فایل js
آدرس فایل js


3- و مرحله سوم هم نوشتن تگ select و استفاده از کلاس chosen-select

<div class=&quotform-group&quot>
    <label for=&quotcategories&quot>انتخاب دسته بندی</label>
    <div id=&quotoutput&quot></div>
    <select class=&quotchosen-select&quot multiple name=&quotcategories&quot style=&quotwidth: 400px&quot>
        <option value=&quot1&quot>اخبار ورزشی</option>
        <option value=&quot2&quot>اخبار علمی</option>
        <option value=&quot3&quot>اخبار فرهنگی</option>
    </select>
</div>
کد html select
کد html select

و در آخر فرم هم این قطعه کد را اضاف میکنیم.

@section('js')
    
        $(&quot.chosen-select&quot).chosen()
    
@endsection


کد پایین صفحه فرم
کد پایین صفحه فرم


و در نهایت فرم و تگ select ما آماده هست.

تگ select با چند انتخاب
تگ select با چند انتخاب


امیدوارم استفاده کنید و لذت ببرید.