Autocomplete textbox from dropdown by jQuery

Using jQuery, we can populate autocomplete text box by the data collected from select box.

For example,

If we have drop down box which contains 200 entries, we cannot apply autocomplete to it. Instead we can have an autocomplete text box whose data can be fetched from Drop-down list box.

		<select id="languages" style="display: none;">
			<option>C</option>
			<option>C++</option>
			<option>Java</option>
			<option>PHP</option>
			<option>Python</option>
			<option>Cobol</option>
			<option>.NET</option>
			<option>Oracle</option>
			<option>DB2</option>
			<option>MySQL</option>
			<option>MS SQL Server</option>
			<option>Derby</option>
			<option>Cassandra</option>
			<option>HBase</option>
			<option>BigData</option>
		</select>

Following jquery code is responsible to auto populate the contents of auto complete text box.

	$(function() {
		$.extend($.ui.autocomplete.prototype, {
			_renderItem : function(ul, item) {
				var term = this.element.val(), html = item.label.replace(term,
						"<b>" + term + "</b>");
				return $("<li></li>").data("item.autocomplete", item).append(
						$("<a></a>").html(html)).appendTo(ul);
			}
		});

		var availableTags = [];

		$("#languages option").each(function() {
			availableTags.push($(this).text());
		});

		$("#suggestions").autocomplete({
			source : availableTags,
			delay : 0
		});
	});

Following the source code of entire html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Autocomplete in jQuery</title>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<style>
.ui-widget {
	font-size: 12px;
}

.frame {
	left: 150px;
	top: 150px;
	width: 500px;
	border: #e6e6e6 solid 1px;
	position: absolute;
	align: center;
	padding: 10px;
}
</style>

<script type="text/javascript">

	$(function() {
		$.extend($.ui.autocomplete.prototype, {
			_renderItem : function(ul, item) {
				var term = this.element.val(), html = item.label.replace(term,
						"<b>" + term + "</b>");
				return $("<li></li>").data("item.autocomplete", item).append(
						$("<a></a>").html(html)).appendTo(ul);
			}
		});

		var availableTags = [];

		$("#languages option").each(function() {
			availableTags.push($(this).text());
		});

		$("#suggestions").autocomplete({
			source : availableTags,
			delay : 0
		});
	});

</script>

</head>
<body>

	<div>
		<select id="languages" style="display: none;">
			<option>C</option>
			<option>C++</option>
			<option>Java</option>
			<option>PHP</option>
			<option>Python</option>
			<option>Cobol</option>
			<option>.NET</option>
			<option>Oracle</option>
			<option>DB2</option>
			<option>MySQL</option>
			<option>MS SQL Server</option>
			<option>Derby</option>
			<option>Cassandra</option>
			<option>HBase</option>
			<option>BigData</option>
		</select>

		<div>
			<input
				id="suggestions">
		</div>
	</div>

</body>
</html>

Share This Post

Related Articles

Leave a Reply

© 2017 Techy Diary. All rights reserved.
Powered by Charvi Groups