CODEWITHSUNDEEP
selectlaravel-bladelaravel-artisanlivesearch
Lina Boukhari
Lina Boukhari

Reputation: 3

Search bar in dropdown list Laravel

How to create a search bar select option form in a dropdown list in laravel blade ?

this is my view :

<div class="col-md-9">                                                     
    <select style="width:100%;margin-bottom:10px;" class="form-control"  name="idclient">                                                       
        <option >Sélectionner un client</option>  
        @foreach($clients as $client )                                                        
        <option value="{{ $client->id_client }}">{{ $client->clientname }}</option>                                                  
        @endforeach
    </select>                                                     
</div>

I tried the class select2 but it doesn't work.

Upvotes: 0

Views: 203

Answers (1)

GigaTera
GigaTera

Reputation: 1280

You can use "native html" to handle this, use <datalist> to make it happend.

in ur case,

<div class="col-md-9">                                                     
    <select style="width:100%;margin-bottom:10px;" class="form-control"  name="idclient">                                                       
        <option >Sélectionner un client</option>  
        @foreach($clients as $client )                                                        
        <option value="{{ $client->id_client }}">{{ $client->clientname }}</option>                                                  
        @endforeach
    </select>                                                     
</div>

you can use <datalist>

the code will be

<div class="col-md-9">
    <input list="clientsList" style="width:100%;margin-bottom:10px;" class="form-control" name="idclient" placeholder="Sélectionner un client">
    <datalist id="clientsList">
        @foreach($clients as $client)
            <option value="{{ $client->id_client }}">{{ $client->clientname }}</option>
        @endforeach
    </datalist>
</div>

hope it help, sorry for bad english.

Upvotes: 0

Related Questions