Facebook style auto suggest/complete component in Vaadin - VaadinAutoComplete
Most of the developers are looking for the facebook style auto suggest/complete textbox. Here is the solution for them.
Actually in facebook it is not an html textbox but it’s a combination of html components that look like a textbox.
VaadinAutoComplete is a vaadin add-on that provides facebook style auto complete features that you can easily integrate to your existing applications.
It is designed and implemented by considering use in existing applications so that you can use it as you are using any other Vaadin component like textbox.
How to use VaadinAutoComplete in your application
To use VaadinAutoComplete into your application, first you have to write a bean (POJO) to encapsulate the information of the entity on which you are going to provide auto complete feature.
For example, consider you are going to provide auto complete feature for employee selection in which employee name and email address will be displayed in the textbox like “emp_first_name, emp_last_name <emp_email_address>” as displayed in following image.
Then in this you have to define one EmployeeBean class that will encapsulate the information of the employee.
Consider your EmployeeBean as below
package com;
public class EmployeeBean
{
private String empNo;
private String firstName;
private String lastName;
private String emailId;
public String getEmpNo()
{
return empNo;
}
public void setEmpNo(String empNo)
{
this.empNo = empNo;
}
public String getFirstName()
{
return firstName;
}
public void setFirstName(String firstName)
{
this.firstName = firstName;
}
public String getLastName()
{
return lastName;
}
public void setLastName(String lastName)
{
this.lastName = lastName;
}
public String getEmailId()
{
return emailId;
}
public void setEmailId(String emailId)
{
this.emailId = emailId;
}
}
Now your EmployeeBean must implement com.jtechnosoft.autosuggest.client.model.ValueObject as below so that it can be used in VaadinAutoSuggest add-on.
For this you have to implement 2 methods of ValueObject.
Now your EmployeeBean will look like this.
package com;
import com.jtechnosoft.autosuggest.client.model.ValueObject;
public class EmployeeBean implements ValueObject
{
private String empNo;
private String firstName;
private String lastName;
private String emailAddress;
/***
* All the getter/setter methods will go here as above
*/
/**
* this method must return an unique identifier for this bean..
* we are just returning employee number
*/
public String getId()
{
return this.empNo;
}
/**
* the return value of this method will be displayed in auto suggest
textbox searched value..
* we are returning the string like "employee_first_name,
employee_last_name <employee_email_address>"
*/
public String getValue()
{
return this.firstName+","+this.lastName+"
<"+this.emailAddress+">";
}
}
There are 2 ways in which you can use VaadinAutoSuggest.
1) You will provide a list (java.util.ArrayList) of ValueObject (in above example, EmployeeBean) to the VaadinAutoSuggest. This list will be sent to the client (browser) only once. Every time when user types into the auto complete textbox, component will get the values to be suggested from the list resides at client side. It will not make a server hit to get the values. So this is called a lazy loading.
2) You will provide an instance of com.jtechnosoft.autosuggest.server.util.AutoSuggestDataProvider to the VaadinAutoSuggest that will implement getData method of it. In this component will make a server hit every time user types in the auto suggest text box. So it serves live suggestions to the user.
These 2 ways are described with examples as below.
1) Providing java.util.List<ValueObject> to the component and not making server hit every time user types in the auto suggest textbox.
Consider you are going to add the component into a vaadin window.
public class AutoSuggestTestWindow extends Window
{
VerticalLayout verticalLayout = null;
public AutoSuggestTestWindow()
{
this.setWidth("500px");
this.setHeight("400px");
verticalLayout = (VerticalLayout) this.getContent();
verticalLayout.setSizeFull();
/***
* get data here… from database, file..etc
* List<ValueObject> data = getData();
*/
//creating auto suggest component here… and passing data
AutoSuggest autoSuggest = new AutoSuggest(data);
this.addComponent(autoSuggest);
}
}
2) Providing an instance of com.jtechnosoft.autosuggest.server.util.AutoSuggestDataProvider to the VaadinAutoSuggest and allowing a component to make a server hit every time user types into auto complete textbox to get the live values.
For this, you have to implement interface com.jtechnosoft.autosuggest.server.util.AutoSuggestDataProvider as below.
public class MyDataProvider implements AutoSuggestDataProvider
{
private static List<ValueObject> data = new ArrayList<ValueObject>();
static
{
//here we are reading the data to be displayed in auto complete from file..
//you can modify the method to read data from database.. or from any other source
data = CommonUtil.getDataFromFile();
}
/**
* this method will be called by VaadinAutoComplete component to get live data..
* it will pass user entered search text to this method as a parameter
*/
public List<ValueObject> getData(String searchText)
{
List<ValueObject> list = filterData(searchText);
return list;
}
private List<ValueObject> filterData(String searchText)
{
List<ValueObject> filterList = null;
if(data!=null && searchText!=null && !searchText.trim().isEmpty())
{
searchText = searchText.trim();
filterList = new ArrayList<ValueObject>();
for (ValueObject valueObject : data)
{
if(valueObject.getValue()!=null &&
valueObject.getValue().toLowerCase().contains(searchText.toLowerCase()))
{
filterList.add(valueObject);
}
}
}
return filterList;
}
}
You have to provide AutoSuggestDataProvider to VaadinAutoComplete component as below.
You can get selected values from component using autoSuggest.getSelectedData() method as shown in following example.
public class AutoSuggestTestWindow extends Window implements ClickListener
{
VerticalLayout verticalLayout = null;
AutoSuggest autoSuggest = null;
public AutoSuggestTestWindow()
{
this.setWidth("500px");
this.setHeight("400px");
verticalLayout = (VerticalLayout) this.getContent();
verticalLayout.setSizeFull();
//creating auto suggest component here…
autoSuggest = new AutoSuggest();
autoSuggest.setAutoSuggestDataProvider(new MyDataProvider()); //passing data provider
this.addComponent(autoSuggest);
Button btnGetSelectedData = new Button("Get Selected Data");
btnGetSelectedData.addListener(this);
this.addComponent(btnGetSelectedData);
}
public void buttonClick(ClickEvent event)
{
//getting selected values from component
List<ValueObject> selectedDataList = autoSuggest.getSelectedData();
System.out.println("selectedDataList = "+selectedDataList);
}
}
Other features
- Adding custom values :
You can add custom value not in the suggestion list into the textbox as below.
- Lazy Loading Status :
You can turn on the feature to display the status of fetching values from server as below.
This component is also available in GWT. As Vaadin is using GWT for rendering.
For more information about VaadinAutoComplete component/GWT component or to have a live demo contact me at: rohitprajapati54@gmail.com
Hi, nice post. Where can I find Vaadin add-on(I couldn't find it from Vaadin add-on repository). Can I get more information about this add-on. I am also trying to develop it but not able to do it.(I got some GWT code with same functionality).
ReplyDeleteHi, it seems that your AutoSuggest widget has not been published into Vaadin directory ! Or perhaps you don't want to open the source ?
ReplyDeletePlease can you tell us if it's free (or not) and if it is opensource ?
Thanks