Auto Completed
Auto Completed
View Demo

Insert it in <head>

<!-- Choose one for Light Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/light/all.min.css" />
<!-- Choose one for Dark Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/dark/all.min.css" />

<script type="text/javascript" src="https://i-as.dev/devui/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://i-as.dev/devui/js/devui-all.min.js"></script>

Use Components

<body>
	<div class="container">
		<div class="chooseFruit">
			<label for="autocomplete">Choose your favourite fruit</label><br />
			<input id="autocomplete" type="text" placeholder="Select fruit..." /><br />
			<span class="hint">Start typing the fruit name</span>
		</div>
	</div>
	<script type="text/javascript">
		var fruits = [
			"Apple", "Apricot", "Avocado", "Banana", "Breadfruit", "Bilberry", "Blackberry",
			"Blackcurrant", "Blueberry", "Boysenberry", "Cantaloupe", "Currant",
			"Cherry", "Cherimoya", "Cloudberry", "Coconut", "Cranberry", "Cucumber",
			"Damson", "Date", "Dragonfruit", "Durian", "Eggplant", "Elderberry",
			"Feijoa", "Fig", "Goji berry", "Gooseberry", "Grape", "Grapefruit",
			"Guava", "Huckleberry", "Honeydew", "Jackfruit", "Jambul", "Jujube",
			"Kiwi fruit", "Kumquat", "Lemon", "Lime", "Loquat", "Lychee", "Mango",
			"Melon", "Canary melon", "Cantaloupe", "Honeydew", "Watermelon",
			"Rock melon", "Mulberry", "Nectarine", "Nut", "Olive", "Orange",
			"Clementine", "Mandarine", "Tangerine", "Pamelo", "Papaya",
			"Passionfruit", "Peach", "Pepper", "Chili Pepper", "Bell Pepper",
			"Pear", "Persimmon", "Physalis", "Plum/prune", "Pineapple",
			"Pomegranate", "Pomelo", "Purple Mangosteen", "Quince", "Raspberry",
			"Western raspberry", "Rambutan", "Redcurrant", "Salal berry", "Satsuma",
			"Star fruit", "Strawberry", "Tamarillo", "Watermelon"
		];
		jQuery(function ($) {
			$("#autocomplete").devuiAutoComplete({
				dataSource: {
					data: fruits
				},
				minLength: 1
			});
		});
	</script>

</body>