1. Requirements

• Jquery
• Bootstrap

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>	
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">	

2. Examples

Basic example

<div class="dropdown" id="first">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		Basic example
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">HTML</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">JavaScript</a></li>
		<li><a href="#">Python</a></li>
		<li><a href="#">Node.js</a></li>
		<li><a href="#">PHP</a></li>
	</ul>
</div>


<script type="text/javascript">
$('#first').searchable()
</script>

Predefined data

<div class="dropdown" id="second">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		Predefined data
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu"></ul>
</div>

<script type="text/javascript">
$('#second').searchable({
	data : [
		{
			href : '#',
			text : 'HTML'
		}, 
		{
			href : '#',
			text : 'CSS'
		},
		{
			href : '#',
			text : 'JavaScript'
		},
		{
			href : '#',
			text : 'Python'
		}, 
		{
			href : '#',
			text : 'Node.js'
		},
		{
			href : '#',
			text : 'PHP'	
		}
	]
})
</script>

JSON Feed

With this option, search logic is on your (server) side. Plugin only polulate dropdown with your result. JSON schema should be the same as above "data example"

<div class="dropdown" id="third">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		JSON feed
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu"></ul>
</div>

<script type="text/javascript">
$('#third').searchable({
	feed : 'http://www.dariuszm.pl/manager/searchable/demo/'
})
</script>

3. Options

Delay

delay int (miliseconds)

Use this option to wait for user stop typing text.

<div class="dropdown" id="fourth">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		Delay example
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">HTML</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">JavaScript</a></li>
		<li><a href="#">Python</a></li>
		<li><a href="#">Node.js</a></li>
		<li><a href="#">PHP</a></li>
	</ul>
</div>

<script type="text/javascript">
$('#fourth').searchable({
	delay : 1000
})
</script>	

Placeholder

placeholder string

Placeholder inside input

<div class="dropdown" id="fifth">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		Placeholder example
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">HTML</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">JavaScript</a></li>
		<li><a href="#">Python</a></li>
		<li><a href="#">Node.js</a></li>
		<li><a href="#">PHP</a></li>
	</ul>
</div>

<script type="text/javascript">
$('#fifth').searchable({
	placeholder : 'type your text here'
})
</script>

4. Events

beforeSearch

fires before executing search

<div class="dropdown" id="sixth">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		beforeSearch example
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">HTML</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">JavaScript</a></li>
		<li><a href="#">Python</a></li>
		<li><a href="#">Node.js</a></li>
		<li><a href="#">PHP</a></li>
	</ul>
</div>

<script type="text/javascript">
$('#sixth').searchable()

$('#sixth').on('beforeSearch' , function() {
	alert('before search')
})
</script>

afterSearch

fires after search

<div class="dropdown" id="seventh">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		afterSearch example
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">HTML</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">JavaScript</a></li>
		<li><a href="#">Python</a></li>
		<li><a href="#">Node.js</a></li>
		<li><a href="#">PHP</a></li>
	</ul>
</div>	

<script type="text/javascript">
$('#seventh').searchable()

$('#seventh').on('afterSearch' , function() {
	alert('after search')
})
</script>

notFound

fires after search and when there is no result

<div class="dropdown" id="eighth">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		notFound example
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">HTML</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">JavaScript</a></li>
		<li><a href="#">Python</a></li>
		<li><a href="#">Node.js</a></li>
		<li><a href="#">PHP</a></li>
	</ul>
</div>

<script type="text/javascript">
$('#eighth').searchable()

$('#eighth').on('notFound' , function() {
	alert('not found')
})
</script>