What is jQuery Autocomplete-
buy research paper online
Auto-completing text fields can be a popular choice for visitors of your site because they make entering information much easier. They enable users to quickly find and select from a pre-populate

jQuery autocomplete

d list of values as they type and also can be used for searching and filtering. When you are entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

Where it is useful-

Messaging feature of Facebook is perfect example for jQuery autocomplete, which lets you send a message to a friend or friends.autocomplete is used to make selecting your friend’s names easier.
Another example we can see in our mailing system i.e Gmail, Yahoo mail’s ‘To’ field.
This is what I am going to explain.

How to use

Getting Started

First, we need to download the jQuery UI zip file from the download builder at http://jqueryui.com/download. Once downloaded, Next, we add required js and css file to the web project.
(Note: I have attached the source code for the complete project with this tutorial. For server side features it uses Tomcat/JEE. You need to change the location for tomcat properly in build.properties file to build and deploy the project using ant.)
Include following JS and CSS files in your html header section.these following files are requird.

<script type="text/javascript" src="/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="/jquery-ui-1.8.11.custom.min.js" ></script>
<link type="text/css" rel="stylesheet" media="all" href="/jquery-ui-1.8.18.custom.css" >



Autocomplete can be customized to work with various data sources, by just specifying the source option. You can pull data from a local and/or a remote source. A data source can be:


Different implementation form for JQuery Autocomplete:


 A. Local Data Source:

1. By using An Array of Strings.

2. By using An Array of Strings with Multiple select feature.


 B. Remote Data Source:

1. By using Ajax call

2. By using Callback function


A. Local Data Source:

Local data source is useful for small data sets (like an address book with 50 entries). The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both.


An Array of Strings:

[ “Choice1”, “Choice2” ]

An Array of Objects with label and value properties:

[ { label: “Choice1”, value: “value1” }, … ]

In case of Array of Objects the label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu.


 1. Implementation by using an Array of Strings: In following example I am taking a html input field with id ‘autocomplete’ and on this id I am applying autocomplete function with array of ‘month’ strings. For including lib files you have to declare a complete path of your web project.


 Html source code for jquery autocomplete with local source:


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Jquery AutoComplete without Ajax (Local data) </title>

<script type="text/javascript"
src="{pageContext.request.contextPath}/assets/js/jquery-1.7.2.min.js">
</script>
<script type="text/javascript"
src="{pageContext.request.contextPath}/assets/jquery-ui/jquery-ui-1.8.11.custom.min.js">
</script>
<link type="text/css" rel="stylesheet" media="all"
href="${pageContext.request.contextPath}/assets/jquery-ui/jquery-ui-1.8.18.custom.css" >

<script type="text/javascript">

$(document).ready(function(){
$("input#autocomplete").autocomplete({
source: ["January","Febuary","March","April","May","June",July",
"August","September","October","November","December"
]
});
});
</script>
<h3>Jquery Autocomplete example with local Source:</h3>
<label for="autocomplete">Search for a Month: </label>
<input id="autocomplete" type="text" />







2.Implementation by using an Array of Strings with Multiple select feature:

In following example we are implementing autocomplete with multiple select feature.for this we are using ‘select’ event which occurs when an item is selected from the menu. The default action is to replace the text field’s value with the value of the selected item. We are using request parameter “term”, which refers to the value currently in the text input.


 Html source code for jQuery autocomplete with multiple select:-


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Jquery Autocomplete with Multiple select</title>

<script type="text/javascript"
src="{pageContext.request.contextPath}/assets/js/jquery-1.7.2.min.js">
</script>
<script type="text/javascript"
src="{pageContext.request.contextPath}/assets/jquery-ui/jquery-ui-1.8.11.custom.min.js">
</script>
<link type="text/css" rel="stylesheet" media="all"
href="${pageContext.request.contextPath}/assets/jquery-ui/jquery-ui-1.8.18.custom.css" >

<script type="text/javascript">
$(document).ready(function(){
var month = [ "January","Febuary","March","April","May","June",
"July","August","September","October","November",
"December"
];
function split( val ){
return val.split( /,s*/ );
}

function extractLast( term ) {
return split( term ).pop();
}

$("input#autocomplete").autocomplete({
source:
function( request, response ) {
//delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
month,extractLast(request.term )));
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space
at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});

</script>

<form action="TestFramwork">
<h3>Jquery Autocomplete with Multiple select</h3>
<div class="ui-widget"><label for="autocomplete">Search for Months: </label>
<input id="autocomplete" type="text" size="40" /></div>
</form>






B. Remote Data Source:

Remote data source is necessary for big data sets, like a database with hundreds or millions of entries to select from.


1. Implementation by using Ajax call (a String, specifying a URL):-

When a ajax is used, the autocomplete plugin expects a URL resource that will return JSON data. It can be on the same host or on a different one. The autocomplete plugin does not filter the results, instead the request parameter “term” gets added to the URL, which the server-side script should use for filtering the results.

For example, if the URL is set to “http://localhost:8080/autocomplete/autocomplete-ajax.jsp” and the user types ‘jan’, a GET request would be made to “http://localhost:8080/autocomplete/autocomplete-ajax.jsp?term=jan”.

The data itself can be in the same format as the local data described above.

In this following example we are specifying a source by calling ‘ajax’ function.


 Html source code for jquery autocomplete with ajax :


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Jquery Autocomplete with Ajax</title>

<script type="text/javascript">
var basePath = '${pageContext.request.contextPath}';
</script>

<script type="text/javascript"
src="{pageContext.request.contextPath}/assets/js/jquery-1.7.2.min.js">
</script>
<script type="text/javascript"
src="{pageContext.request.contextPath}/assets/jquery-ui/jquery-ui-1.8.11.custom.min.js">
</script>
<link type="text/css" rel="stylesheet" media="all"
href="${pageContext.request.contextPath}/assets/jquery-ui/jquery-ui-1.8.18.custom.css" >

<script type="text/javascript">
var items;
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: function(request, response) {
$.ajax({
// basePath is used for defining contecxt-path of the url.
url: basePath + "/JqueryAutocompleteAjax",
dataType: "json",
// data to be sent to the server:
data: {
term : request.term,
// for passing extra parameter:
param1 : "param1 Value",
param2 : "param2 Value"
},
/*
A Success function to be called if the request succeeds.The function gets
passed two arguments-
The data returned from the server, a string describing the status:
*/
success: function(data,type) {
console.log( data);
items = data;
response(items);
},
//if the request fails,A error function to be called.
error: function(data,type){
console.log( type);
}
});
}
});

});

</script>

<h3>Jquery Autocomplete example with Ajax.</h3>
<label for="autocomplete">Search for a Month: </label>
<input id="autocomplete" type="text" />



Source code for Ajax JSON request using Java Servlet:-The code source of the servlet is presented below,which will give you JSON response.

i.e. -If you have Url like this:-“http://localhost:8080/autocomplete/autocomplete-ajax.jsp?term=j”

Then,Servlet response will be: [“January”, “June”, “July”].


package com.actions;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;

public class JqueryAutocompleteAjax extends HttpServlet {

private static final long serialVersionUID = 1L;
private static final String[] MONTH = new String[] {
"January","Febuary","March","April","May","June",
"July","August","September","October","November","December"
};

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException IOException {

PrintWriter out = response.getWriter();
response.setContentType("text/html");
JSONArray arrayObj=new JSONArray();

String query = request.getParameter("term");
System.out.println(query);
query = query.toLowerCase();

for(int i=0; i<MONTH.length; i++) {
String month = MONTH[i].toLowerCase();
if(month.startsWith(query)) {

arrayObj.put(MONTH[i]);
}
}
out.println(arrayObj.toString());
out.close();

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//Do something
}
}






Source code for web.xml:-

Following code is required for mapping the above servlet, in which “servlet-class” tag is fully qualified name of your servlet and “url-pattern” tag describes a pattern used to resolve URLs. The portion of the URL after the “http://host:port + WebAppName” is compared to the “url-pattern” by WebLogic Server. If the patterns match, the servlet mapped in this element will be called.


<servlet>
<servlet-name>JqueryAutocompleteAjax</servlet-name>
<servlet-class>com.actions.JqueryAutocompleteAjax</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>JqueryAutocompleteAjax</servlet-name>
<url-pattern>/JqueryAutocompleteAjax</url-pattern>
</servlet-mapping>





2. Implementation by using Callback function:

The third variation, The callback, provides the most flexibility, and can be used to connect any data source to autocomplete. The callback gets two arguments:-

A request object, with a single property called “term”, which refers to the value currently in the text input. i.e.- when the user entered “jan” in a month field, the Autocomplete term will equal “jan”.

A response callback, which expects a single argument : the data to suggest to the user. This data should be filtered based on the provided term.

i.e.- when the user entered “jan” in a month field, the Autocomplete term will equal “jan” and response will equal to “January”.


 Html source code for jQuery autocomplete with callback :


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Jquery Autocomplete with Callback function.</title>

<script type="text/javascript">
var basePath = '${pageContext.request.contextPath}';
</script>

<script type="text/javascript"
src="{pageContext.request.contextPath}/assets/js/jquery-1.7.2.min.js">
</script>
<script type="text/javascript"
src="{pageContext.request.contextPath}/assets/jquery-ui/jquery-ui-1.8.11.custom.min.js">
</script>
<link type="text/css" rel="stylesheet" media="all"
href="${pageContext.request.contextPath}/assets/jquery-ui/jquery-ui-1.8.18.custom.css" >

<script type="text/javascript">
$(document).ready(function() {

$("input#autocomplete").autocomplete({
source: function( request, response ) {
$.getJSON( basePath + "/JqueryAutocompleteAjax", {
term: request.term
}, response );
}

});
});

</script>

<h3>Jquery Autocomplete example by using Callback Function.</h3>
<label for="autocomplete">Search for a Month: </label>
<input id="autocomplete" type="text" />





You can download the autocomplete source code from here 


765qwerty765