Fork me on GitHub

jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.

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>