b3n/datalist

datalist's Issues

$input.autocomplete is not a function

I tried to include your library on my website and got this error:

datalist.js:19 Uncaught TypeError: $input.autocomplete is not a function

option onclick $input.change(function () {}) no effect

function datatablesDraw (){
// DataTable // Apply the search
var table = $('#table').DataTable();
var last;
// Apply the search
table.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input:not(#all)', table.column( colIdx ).footer() ).on( 'change', function (event) {
console.log(this.value + " " + this.value.indexOf("'"));
var searchText = this.value;
last = event.timeStamp;
setTimeout(function(){ //0.5s
if(last-event.timeStamp==0)

	                   {
	                	 table
 			                .column( colIdx )
 			                .search( searchText )
 			                .draw();// work
		                	
	                    }
	             },400);
	        	
	        } );
	    } );
	}



	$(document).ready(function() {
		var table = $('#table').DataTable({
	        "ajax": {
	            "url": "/seo/classification/getPageGroupAi.html"+"?id="+$("#userId").val(),
	            "type": "post",
	            "async" : false,
	            "error":function(){alert("error");},
	            dataFilter:function(data){
	           		var obj = JSON.parse(data); //
	           		$("#one_list").empty();
	           		for (var i = 1; i < obj.aiOneGroup.length; i++) {
						$("#one_list").append("<option label='"+obj.aiOneGroup[i].firstGroup+"' value='"+obj.aiOneGroup[i].firstGroupName+"' />");
					}
	           		$("#two_list").empty();
	           		for (var i = 1; i < obj.aiTwoGroup.length; i++) {
						$("#two_list").append("<option label='"+obj.aiTwoGroup[i].sendGroup+"' value='"+obj.aiTwoGroup[i].sendGroupName+"' />");
					}
	           		$("#three_list").empty();
	           		for (var i = 1; i < obj.aiThreeGroup.length; i++) {
						$("#three_list").append("<option label='"+obj.aiThreeGroup[i].thridGroup+"' value='"+obj.aiThreeGroup[i].thridGroupName+"' />");
					}
	           	return data;
	           }
	        },
	        "info" : true,//
	        //"dataSrc": "data",//data
	        "dom": '<"top"lp<"clear">>rt<"bottom"ip<"clear">>',
           "serverSide": true,
	        "aLengthMenu" : [500, 1000, 2000], 
	        "iDisplayLength" : 500, 
	        "order": [[ 0, "desc" ]],
	        "columns": [
				{ "data": function(obj){  
							return '<td><input type="checkbox" class="shiftCheckbox" id="kp-'+obj.id+'" name="mychk" value="'+obj.id+'"><a>'+obj.tCode+'</a></td>';
					          //return  '<a>'+obj.tCode+'</a>';
					          //
					          //<input id="all" type="checkbox" name="yon" onclick="chk();"/> 
					}
				},
	            { "data": "productCode"},
	            { "data": "productName"},
	            { "data": function(obj){  
					if(obj.firstGroup == null || obj.firstGroup == ""){
				          return  '<a id="firstGroupName-'+obj.id+'"></a><br><a id="firstGroup-'+obj.id+'"></a>';
					}else{
				          return  '<a id="firstGroupName-'+obj.id+'">'+obj.firstGroupName+'</a><br><a id="firstGroup-'+obj.id+'">'+obj.firstGroup+'</a>';
				          //<input type="checkbox" class="shiftCheckbox" id="obj.LBID" name="mychk" value="obj.LBID">
				          //<input id="all" type="checkbox" name="yon" onclick="chk();"/> 
						}
					}
	            },
	            { "data": function(obj){  
					if(obj.sendGroup == null || obj.sendGroup == ""){
				          return  '<a id="sendGroupName-'+obj.id+'"></a><br><a id="sendGroup-'+obj.id+'"></a>';
					}else{
				          return  '<a id="sendGroupName-'+obj.id+'">'+obj.sendGroupName+'</a><br><a id="sendGroup-'+obj.id+'">'+obj.sendGroup+'</a>';
					}
				}},
	            { "data": function(obj){  
					if(obj.thridGroup == null || obj.thridGroup == ""){
				          return  '<a id="thridGroupName-'+obj.id+'"></a><br><a id="thridGroup-'+obj.id+'"></a>';
					}else{
				          return  '<a id="thridGroupName-'+obj.id+'">'+obj.thridGroupName+'</a><br><a id="thridGroup-'+obj.id+'">'+obj.thridGroup+'</a>';
					}
				}},
	            {	
	            	data: function(obj){
	            		return '<a type="button" class="btn btn-danger btn-xs" onclick="autoGroup('+obj.id+');">auto</a><a type="button" class="btn btn-primary btn-xs" onclick="getModal('+obj.id+');">more</a>';
		                //return "<button class='edit-btn' type='button'>editor</button><a class='btn btn-warning btn-xs' onclick='delStockById("+obj.LBID+")'>delete</a>";
	            	}
	            },
	            {	
	            	data: function(obj){
	            		if(obj.status == 1){
					     	return  '<a id="statusId-'+obj.id+'" onclick="changeStatus('+obj.id+');" class="btn btn-success btn-xs">ok</a>';
	            		}else{
					     	return  '<a id="statusId-'+obj.id+'" onclick="changeStatus('+obj.id+');" class="btn btn-danger btn-xs">no</a>';
	            		}
		                //return "<button class='edit-btn' type='button'>editor</button><a class='btn btn-warning btn-xs' onclick='delStockById("+obj.LBID+")'>delete</a>";
	            	}
	            }
	        ]
	        }
	      
	    });
		
		
		$('.shiftCheckbox').shiftcheckbox();
	     // Setup - add a text input to each footer cell
	    $('#table tfoot th').each( function () {
	        var title = $('#table tfoot th').eq( $(this).index() ).text();
	        if($(this).index() == 0){
		        $(this).html( '<input id="all" type="checkbox" name="yon" onclick="chk();" style="width: 20%;"/><input type="text" placeholder="search" style=" width: 80%; "/>' );
	        }else if($(this).index() == 3){
		        **$(this).html( '<input type="text" list="one_list"  placeholder="search" />' );**
		        //<label for="statesCombo-ddi" id="statesLabel"></label><span id="statesCombo"></span>  class="flexdatalist" 
	        }else if($(this).index() == 4){
	        	**$(this).html( '<input type="text" list="two_list" placeholder="search" />' );**
	        	//
	        }else if($(this).index() == 5){
	        	**$(this).html( '<input type="text" list="three_list" placeholder="search" />' );**
	        }else{
		        $(this).html( '<input type="text" placeholder="search" />' );
	        }
	    } );

when select datalist from option , input no effect，but i keyup change，datatables will "datatablesDraw"