Dynamic Column Level DataList

johnswang

I currently have the following code either to create a drop down or create an input for column search

 initComplete: function () {
            this.api().columns('.select-filter').every( function (index) {
                var column = this;
                var select = $('<select class="dt_search editableBox" id="1"><option value=""></option></select>')
                  //.appendTo( $("#status_menu_placeholder").empty() )
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    });
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                });
            });

            this.api().columns('.input-filter').every(function(index) {
              var that = this;
              var input = $('<input list="'+index+'" placeholder="Search"  id="'+index+'"    name="'+index+'" class="input-filter">')
                .appendTo($(this.footer()).empty())

                .on('keyup change clear', function() {
                  if (that.search() !== this.value) {
                    that
                      .search(this.value)
                      .draw();
                  }
                });
            });
          },


    dom: 'Bfrtip',
     //dom:   '<"toolbar">frtip',

However, I would like to to create a datalist for all of the columns so the users can either type of select from the drop down. However can I go about achieving this.

Also, how can I make this dynamic query so it will update the list as I perform the search.

Thank you in advance.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

You'd need a library like Select2 which can act as a combo-box (i.e. let the user input data or act as a select dropdown). When you get input from that library then you would use the DataTables search() method.

Allan

johnswang

Allan,

Thanks Allan!

If possible, I was going to trying to implement using HTML datalist element instead of using the library. Something like this for each columns on my datatable.

<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>

kthorngren

I would like to to create a datalist for all of the columns so the users can either type of select from the drop down. However can I go about achieving this.

What happens? Do you get errors in the browser's console?

Please build a simple test case showing what you have so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin