Jquery is a powerful library and it is heart of web develepment. It includes different types of functions.
Today we are going to discuss function named autocomplete() which is useful to auto populate the suggestions as user types, filtering and searching. It is included in jquery ui api. We will take an example for auto complete. Please check the example below.
<?php
$query = mysql_query("SELECT country_name from country_list");
$country_arr = mysql_fetch_array($query);
?>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
jQuery(function($){
var collect_list = <?php echo json_encode($country_arr); ?>;
$( "#country_list" ).autocomplete({
source: collect_list,
select: function(event, ui) {
$("#country_list").val(ui.item.label)
jQuery("#country_list_frm").submit();
}
});
});
});
<body>
<div class="main">
<form id="country_list_frm">
<label>country</label>
<input type="text" name="country_list" id="country_list" />
</form>
</div>
</body>
</html>
In above example, we are fetching list of countries details from database and passing it in the auto-complete function. It will populate the list of countries as user types in text field.
0 Comment(s)