Q:

Datatables tags search

I've been trying to get tags working with Jquery Datatables for about 1 week now with no luck! 
I've gone through stackoverflow and have not found the help i'm looking for.
This post here was insightful:
dataTables Column Filtering Plugin with Select Tags
I am using jquery.tag-editor to create the tags and using this code I can successfully create tags inside the global search box:
      $('div.dataTables_filter input').tagEditor();

my issue is that the tags are not filtering the Datatable as expected, I know that the table needs to be redrawn but from what I can see the tagEditor creates 3 div's inside a ul inside the searchbox:
    <li><div class="tag-editor-spacer"></div>
    <div class="tag-editor-tag">january</div>
    <div class="tag-editor-delete"><i></i></div></li>

with the middle div tag-editor-tag containing the string I want to use to filter the datatable. On change it should redraw the table using the value inside the tag-editor-tag div.
I think this is close as I have seen to what I want it to do but have no idea how to ignore the divs and get the middle value.
    $('div.dataTables_filter input').change(function(){
    table.fnFilter($('.....').text()); 
    });

Any help is appreciated.

A:

Do not add the tag-editor plugin to the default search input of DataTables.
Simply create your own search field. This can easily be done by taking the following steps.

Take a look at the dom option of dataTables.

dom
Define the table control elements to appear on the page and in what order.

Using the dom option you can hide the default search input field adding a custom div element instead.

Take a look at the events being fired during the initialisation of dataTables.

init
Initialisation complete event - fired when DataTables has been fully initialised and data loaded.
preInit
Initialisation started event - triggered immediately before data load.

Use the preInit event to append a search input-field or textarea to the custom div element that was created using the dom option.
Use the init event to hook up the tag-editor plugin to the appended search input field.

Make use of the dataTables search API method to do the search, whenever the change event on the tag-editor search field has been triggered.

search()
Search for data in the table.

Here is an example using a static HTML table.

var $tagsLabel = $("<lable>")
var $tagsInput = $("<textarea>");

$table = $("#example")
  .on("preInit.dt", function( e, settings) {
  $tagsLabel.append($tagsInput)
  $('.dataTables_tags').append($tagsLabel)
})
  .on("init.dt", function( e, settings ) {
  $tagsInput.tagEditor({
    delimiter: ', ',
    placeholder: 'Enter tags ...',
    onChange: function(field, editor, tags) {
      if ( tags.length ) {
        if( tags.length > 1 ) {
          $table.search(tags.join('|'), true, false).draw();
        } else {
          $table.search( tags[0] ).draw();
        }
      }
      else {
        $table.search('').draw(true);
      }
    },
  });
})
  .DataTable({
  "dom": '<l<"dataTables_tags"><t>ip>'
});
.dataTables_wrapper .dataTables_tags {
    float: right;
    text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tag-editor/1.0.20/jquery.tag-editor.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/caret/1.0.0/jquery.caret.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tag-editor/1.0.20/jquery.tag-editor.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr></thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr></tfoot> <tbody> <tr> <td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>2011/04/25</td><td>$320,800</td></tr><tr> <td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>63</td><td>2011/07/25</td><td>$170,750</td></tr><tr> <td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td><td>$86,000</td></tr><tr> <td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr><tr> <td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td><td>$162,700</td></tr><tr> <td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td><td>$372,000</td></tr><tr> <td>Herrod Chandler</td><td>Sales Assistant</td><td>San Francisco</td><td>59</td><td>2012/08/06</td><td>$137,500</td></tr><tr> <td>Rhona Davidson</td><td>Integration Specialist</td><td>Tokyo</td><td>55</td><td>2010/10/14</td><td>$327,900</td></tr><tr> <td>Colleen Hurst</td><td>Javascript Developer</td><td>San Francisco</td><td>39</td><td>2009/09/15</td><td>$205,500</td></tr><tr> <td>Sonya Frost</td><td>Software Engineer</td><td>Edinburgh</td><td>23</td><td>2008/12/13</td><td>$103,600</td></tr><tr> <td>Jena Gaines</td><td>Office Manager</td><td>London</td><td>30</td><td>2008/12/19</td><td>$90,560</td></tr><tr> <td>Quinn Flynn</td><td>Support Lead</td><td>Edinburgh</td><td>22</td><td>2013/03/03</td><td>$342,000</td></tr><tr> <td>Charde Marshall</td><td>Regional Director</td><td>San Francisco</td><td>36</td><td>2008/10/16</td><td>$470,600</td></tr><tr> <td>Haley Kennedy</td><td>Senior Marketing Designer</td><td>London</td><td>43</td><td>2012/12/18</td><td>$313,500</td></tr><tr> <td>Tatyana Fitzpatrick</td><td>Regional Director</td><td>London</td><td>19</td><td>2010/03/17</td><td>$385,750</td></tr><tr> <td>Michael Silva</td><td>Marketing Designer</td><td>London</td><td>66</td><td>2012/11/27</td><td>$198,500</td></tr><tr> <td>Paul Byrd</td><td>Chief Financial Officer (CFO)</td><td>New York</td><td>64</td><td>2010/06/09</td><td>$725,000</td></tr><tr> <td>Gloria Little</td><td>Systems Administrator</td><td>New York</td><td>59</td><td>2009/04/10</td><td>$237,500</td></tr><tr> <td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td><td>$132,000</td></tr><tr> <td>Dai Rios</td><td>Personnel Lead</td><td>Edinburgh</td><td>35</td><td>2012/09/26</td><td>$217,500</td></tr><tr> <td>Jenette Caldwell</td><td>Development Lead</td><td>New York</td><td>30</td><td>2011/09/03</td><td>$345,000</td></tr><tr> <td>Yuri Berry</td><td>Chief Marketing Officer (CMO)</td><td>New York</td><td>40</td><td>2009/06/25</td><td>$675,000</td></tr><tr> <td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td><td>$106,450</td></tr><tr> <td>Doris Wilder</td><td>Sales Assistant</td><td>Sidney</td><td>23</td><td>2010/09/20</td><td>$85,600</td></tr><tr> <td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td><td>$1,200,000</td></tr></tbody> </table>

