CODEWITHSUNDEEP
phplaraveltwitter-bootstrapdropdownplaceholder
flash
flash

Reputation: 1519

Dropdown list on placeholder in bootstrap and laravel

I am working on a website in which I want to place a drop-down list on click of a placeholder. The HTML code which I have used in order to place a placeholder is:

<div class="col-3 pt-4 input_hello_all">
   <input type="text" class="form-control" placeholder="hello/all"> 
</div>

The dropdown list will be pulled from the my-sql database from the hello table from the name column. The name column has following list of elements:

  1. Movies
  2. Music
  3. Entertaiment

I will be injecting $category->name in the the placeholder in order to pull the data from the database from the hello table/name column.

Problem Statement:

I am wondering what changes I should make in the HTML code so that on click of a placeholder hello/all from the fiddle, dropdown list gets generated having items Movies, Music, Entertainment.

Upvotes: 0

Views: 1067

Answers (2)

akshaypjoshi
akshaypjoshi

Reputation: 1295

In your html code, you can use simple text box and by using javascript you can remove textbox and append dropdown list.

In html,

<div id="appendData" class="col-3 pt-4 input_hello_all">
   <input id="inputPlace" type="text" class="form-control" placeholder="hello/all"> 
</div>

In javascript, for dynamic data : 

<script>
$(document).ready(function(){
    $(document).on('click','#inputPlace',function(e){
        $.ajax({
            url: '/your/url',
            type: 'GET',
            success: function(data){
                var optionList = '';
                $('#appendData').html('<select id="selectionList" class="form-control"></select>');
                $.each(data, function(key,value){
                    optionList += '<option value="'+key+'">'+value+'</option>';
                });
                $('#selectionList').html(optionList);
            }
        });
    })
});
</script>

Using this, You can dynamically convert your textbox into dropdownlist using ajax.

Static data example : 

<script>
    $(document).ready(function(){
        $(document).on('click','#inputPlace',function(e){
            var optionList = '';
            $('#appendData').html('<select id="selectionList" class="form-control"></select>');
            optionList = '<option value="1">Movies</option><option value="2">Music</option><option value="3">Entertainment</option>';
            $('#selectionList').html(optionList);
        })
    });
</script>

Upvotes: 0

whitwhoa
whitwhoa

Reputation: 2489

Simplest option would be to use a <select> element. In your view you could use something along the lines of:

<select id="mySelect" name="mySelect">
    @foreach($categories as $category)
        <option>{{$category->name}}</option>
    @endforeach
</select>

If you are wanting to do this asynchronously you could use (assuming you've got access to jquery as you tagged this with twitter-bottstrap and jquery is a prerequisite)

// IN YOUR VIEW
<select id="mySelect" name="mySelect">

</select>

$(document).ready(function(){

    $('#mySelect').click(function(){

        $.ajax({
            url: '/your/route',
            type: 'GET',
            //data: 'optionalParameter=' + someVar,
            success: function(data){

                // You could generate the <option> markup on
                // server and just return it as one string
                // replacing the html of #mySelect
                $('#mySelect').html(data);

                // Or return it as json and loop through it
                // buildling the <option> markup clientside
                $('#mySelect').html(''); //clear any existing options
                $.each(data, function(k,v){
                    $('#mySelect').append($('<option></option>').html(v)));
                });

            }
        });

    });

});

I tested none of this, but it's pretty straight forward. If you're dead set on using the textbox...you might look into jquery-ui's autocomplete, but things as such are generally for values which can be selected OR entered by a user.

Upvotes: 2

Related Questions