автозаполнение с поиском DataTables Jquery

Я хочу осуществить автозаполнение http://jqueryui.com/autocomplete/ фильтровать по каждой колонкеавтозаполнение с поиском DataTables Jquery

в DataTables JQuery плагин.

Например, если я хочу искать Embeded Devices с ED в поиске datatables, это не сделает это для меня ... Поэтому я хочу показать автоматическое завершение и когда пользователь выбирает его из списка, тогда я хочу datatable для фильтрации.

var oTable = $('#listings_row').dataTable(); 
$("thead input").keyup(function (
       oTable.fnFilter(this.value, parseInt($(this).attr('id'))); 
      }); 


      $("thead input").each(function (i) { 
       asInitVals[i] = this.value; 
      }); 

      $("thead input").focus(function() { 
       if (this.className == "search_init") 
       { 
        this.className = ""; 
        this.value = ""; 
       } 
      }); 

      $("thead input").blur(function (i) { 
       if (this.value == "") 
       { 
        this.className = "search_init"; 
        this.value = asInitVals[$("#listings_row thead input").index(this)]; 
       } 
      });

Как я могу это сделать?

источник

2013-06-24 Anonymous

Вы можете использовать свой плагин для этого, взгляните на пример: 4'th column

Вот ссылка на GitHub моего плагина:

Yet Another DataTables Column Filter - (yadcf)

Вот фрагмент кода, просто установить enable_auto_complete: true в соответствующих столбцах (в коде ниже column_number : 3):

$(document).ready(function(){ 
    $('#example').dataTable().yadcf([ 
    {column_number : 0}, 
    {column_number : 1, filter_container_id: "external_filter_container"}, 
    {column_number : 2, data:["Yes","No"], filter_default_label: "Select Yes/No"}, 
    {column_number : 3, text_data_delimiter: ",", enable_auto_complete: true}, 
    {column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]); 
});

источник

2013-06-24 14:09:05 Daniel

Вот несколько вопросов, мой текст разделитель не является «». Могу ли я получить это из базы данных? Также я хочу совпадающий текст поставьте отметку –

относительно 'text_data_delimiter', его необязательный аргумент, вы не должны использовать его, вы можете использовать только 'enable_auto_complete: true', например:' {column_number: 3, enable_auto_complete: true} ', перейдите к примеру/документам плагина ... вы можете поместить любой' text_data_delimiter', поэтому да, вы можете взять его из своего db и передать его плагину, если хотите * выделить совпадающий текст *, вы можете открыть проблему на моей странице gigub плагина, и я попытаюсь ее реализовать ... – Daniel

Это только поиск для консъема в этом случае такие символы терпят неудачу. У меня есть «Jumera Lakes Towers», и когда я набираю JLT, это не работает. можем ли мы что-то сделать для этого? –

Это может быть слишком поздно, но после стольких исследований и поиска в Интернете я закончил писать свою автозаполнение. Это было немного утомительно, но хорошо, что это работает. Сначала я построил массив js, содержащий все столбцы таблицы. массив как источник для автозаполнения моего собственного текстового поля и использовал его для поиска. Один трюк помещает тег привязки внутри тегов td, чтобы включить фокусировку на искомый текст. oTable - мой datatable.myInputTextField вне поля ввода, где я могу искать текст. Чтобы включить facebook как автозаполнение, используйте @ в поле.

$("#myInputTextField").autocomplete({ 

    source:filterFieldValues, 
    select:function(event,ui){   
     { 
      if(ui!=null&&ui.item!=null){ 
       var searchedColumnValue=ui.item.value; 
       if(searchedColumnValue!=null||searchedColumnValue!=''){ 
        $("#myInputTextField").val(''); 
        $("#myInputTextField").val(searchedColumnValue.trim()); 
        var colValue=$("#myInputTextField").val(); 
        $("a:contains('"+colValue+"')").parents("td").toggleClass("focus"); 
        oTable.search($(this).val()).draw();        
        window.setTimeout(function(){ 
         $("a:contains("+colValue+")").focus(); 
         }, 5); 

       } 
      } 
     }   
    }, 
    focus:function(event,ui){ 

    } 
    }).autocomplete('disable') 
    .on('keypress', function(e) { 
     evt=e||window.event;    
     var code = evt.charCode || evt.keyCode;   
     //Detect whether '@' was keyed. 
     if (evt.shiftKey && code === 64) { 
      $(this).autocomplete('enable'); 
      return false; 
     }   
     oTable.search($(this).val()).draw(); 
    }); 


$("#myInputTextField").blur(function() 
{ 
    $("#myInputTextField").autocomplete('disable'); 
    oTable.search($(this).val()).draw(); 
}); 



$('#myInputTextField').on('input propertychange paste', function() {   
     oTable.search($(this).val()).draw();   
});

источник

2015-07-16 05:33:31 Harish

window setTimeOut для IE, где focus размывается – Harish

автозаполнение с поиском DataTables Jquery

ответ

Смежные вопросы