Multi select autocomplete jquery example with code

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will show you how to use autocomplete also with multiple select option by jquery. So i think we will did the autocomplete for single option by using jquery ui plugin. But now in this post we can learn about multi selection autocomplete by using jquery ui. Now in the bellow preview we can see how will output of our multi select autocomplete because its like to choose js or something like the plugin.

But for the layout i just like to add my own css. This example here i will use jquery ui js file and then one more multi select js file that file through and we can do multi select and also one more thing we can also customization of autocomplete. multiselect.js file for the example if we want to add more custom attribute when select option. so, let’s start and see the example.

Example:
<html>
<head>
<title>Autocomplete multiselect jquery Example</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/savanihd/multi-select-autocomplete/master/style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/savanihd/multi-select-autocomplete/master/autocomplete.multiselect.js"></script>
</head>
<body>
<div class="main-div">
	<h2>Autocomplete multiselect jquery Example</h2>
	<input id="myAutocompleteMultiple" type="text" />
</div>
<script type="text/javascript">
	$(function(){
		var availableTags = [
		    "Laravel",
		    "Bootstrap",
		    "Server",
		    "JavaScript",
		    "JQuery",
		    "Perl",
		    "PHP",
		    "Python",
		    "Ruby",
		    "API",
		    "Scheme"
		];
		$('#myAutocompleteMultiple').autocomplete({
			source: availableTags,
			multiselect: true
		});
	});
</script>
</body>
</html>

Read Also :Laravel Join with Subquery in Query Builder Example

Thanks for read. I hope it help you. For more you can follow us on facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →