Autocomplete is a common feature available in lot of web tools and services. You will find lots of implementation of autocomplete features.
Autocomplete is an input field to enable users quickly finding and selecting some value.
When we type character/ word in textbox, it will search matching values and will display in small division as dropdown.
Let us see how can we implement a simple Autocomplete feature in JSP page.
Required Files :
Download file : ui.autocomplete.js
(or)
jQuery’s autocomplete plugin
JSP Page:
<html>
<head>
<script src=”jquery.js“ type=”text/javascript”></script>
<script src=”ui.autocomplete.js“ type=”text/javascript”></script>
(or)
<script src=”jquery.autocomplete.js” type=”text/javascript”></script>
</head>
<form>
<% String names=”Testing,Catch,Test,Welcome”; %>
<input type=”hidden” id=’ac‘ value=”<%=names%>”/>
<input type=”text” id=’acbox‘ />
</form>
</html>
<script type=”text/javascript”>
jQuery(document).ready(function(){
var itemNames= jQuery(‘#ac’).val();
var mydata = itemNames.split(“,”);
jQuery(‘#acbox’).autocomplete({
data:mydata,
autoFill: true
});
});
</script>
if you use plugin jquery.autocomplete.js, just give script like this:
<script type=”text/javascript”>
jQuery(document).ready(function() {
var itemNames= jQuery(‘#ac’).val();
var mydata = itemNames.split(“,”);
jQuery(“#acbox“).autocomplete(mydata);
});
</script>
Output:
Log In
Forum
Blog
Careers
Blogs Aggregator 
Subscribe to this blog. 
