Fork me on GitHub

Textbox Filter Control Usage

Textbox Filter Control

Add jPList scripts to the HEAD:

    
<!-- jPList Core -->		
<link href="jplist.core.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.core.min.js"></script>	

<!-- Textbox Control -->			
<link href="jplist.textbox-filter.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.textbox-filter.min.js"></script>

<script>
$('document').ready(function(){
	$('#demo').jplist({				
		itemsBox: '.list' 
		,itemPath: '.list-item' 
		,panelPath: '.jplist-panel'	
	});
	
});
</script>
			
	

Add basic HTML structure to the BODY:

    
<!-- demo -->
<div id="demo">
	
	<!-- panel -->
	<div class="jplist-panel">						
		...
		
	</div>				 
	
	<!-- HTML data -->   
	<div class="list">
		
		<!-- item 1 -->
		<div class="list-item">	
			...
		</div>
		
		<!-- item 2 -->
		<div class="list-item">	
			...
		</div>
		
		...
		
	</div>
	
	<!-- no results found -->
	<div class="jplist-no-results">
		<p>No results found</p>
	</div>
					
</div>
			
	

Textbox control that filters on KeyUp event:

    
<!-- filter by title -->
<div class="text-filter-box">
   <i class="fa fa-pencil jplist-icon"></i>
   
   <!--[if lt IE 10]>
   <div class="jplist-label">Filter by Title:</div>
   <![endif]-->
   
   <input 
	  data-path=".title" 
	  type="text" 
	  value="" 
	  class="jplist-no-right-border"
	  placeholder="Filter by Title" 
	  data-control-type="textbox" 
	  data-control-name="title-filter" 
	  data-control-action="filter"
   />
   
	<!-- clear textbox button -->
	<i class="fa fa-times-circle jplist-clear" data-type="clear"></i>
</div>	
	

Textbox control that filters on button click:

    
<!-- filter by title -->
<div class="text-filter-box">
                        
   <!--[if lt IE 10]>
   <div class="jplist-label">Filter by Title:</div>
   <![endif]-->
   
   <input 
      data-path=".title" 
      data-button="#title-search-button"
      type="text" 
      value="" 
      placeholder="Filter by Title" 
      data-control-type="textbox" 
      data-control-name="title-filter" 
      data-control-action="filter"
   />
   
   <button 
      type="button" 
      id="title-search-button">
      <i class="fa fa-search"></i>
   </button>
</div>   
			
	

Textbox control with typing callbacks:

    
<!-- JavaScript -->	
<script>

	$('document').ready(function(){

		/**
		 * user defined functions
		 */
		jQuery.fn.jplist.settings = {

			/**
			 * textbox filter start typing callback
			 */
			typingStart: function(){
				console.log('typing start');
			}

			/**
			 * textbox filter end typing callback
			 */
			,typingEnd: function(){
				console.log('typing end');
			}
		};

		$('#demo').jplist({
			itemsBox: '.list'
			,itemPath: '.list-item'
			,panelPath: '.jplist-panel'
		});
	});
</script>
	
<!-- control layout -->
<div class="text-filter-box">
   <i class="fa fa-pencil jplist-icon"></i>
   
   <!--[if lt IE 10]>
   <div class="jplist-label">Filter by Title:</div>
   <![endif]-->
   
   <input 
	  data-path=".title" 
	  type="text" 
	  value="" 
	  class="jplist-no-right-border"
	  placeholder="Filter by Title" 
	  data-control-type="textbox" 
	  data-control-name="title-filter" 
	  data-control-action="filter"
	  data-typing-delay="1000"
	  data-typing-start="typingStart"
	  data-typing-end="typingEnd"
   />
   
	<!-- clear textbox button -->
	<i class="fa fa-times-circle jplist-clear" data-type="clear"></i>
</div>