Fork me on GitHub

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

Autocomplete Control Usage

Autocomplete 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>	
<!-- Autocomplete Control -->			
<script src="jplist.autocomplete.min.js"></script>
<link href="jplist.autocomplete.min.css" rel="stylesheet" type="text/css" />
<script>
$('document').ready(function(){
	$('#demo').jplist({				
		itemsBox: '.list' 
		,itemPath: '.list-item-link' 
		,panelPath: '.jplist-panel'	
	});
	
});
</script>
			
	

Add basic HTML structure to the BODY:

    
<!-- demo -->
<div id="demo">
	
	<!-- panel -->
	<div class="jplist-panel">						
	<!-- autocomplete control -->
	<div 
		class="jplist-autocomplete"
		data-control-type="autocomplete" 
		data-control-name="default-autocomplete" 
		data-control-action="autocomplete"
		data-path=".title">
		
		<!-- autocomplete textbox -->
		<input type="text" placeholder="Filter by Title" />
		
		<!-- autocomplete button -->
		<button type="button">
			<i class="fa fa-angle-double-down"></i>
		</button>			
	</div>
		
	</div>				 
	
	<!-- HTML data -->   
	<div class="list">
		
		<!-- item 1 -->
		<a href="..." title="" class="list-item-link">	
			<div class="title">Calendar</div>
			...
		</a>
		
		<!-- item 2 -->
		<a href="..." title="" class="list-item-link">	
			<div class="title">Architecture</div>
			...
		</a>
		
		...
		
	</div>
	
	<!-- no results found -->
	<div class="jplist-no-results">
		<p>No results found</p>
	</div>
					
</div>