Datalist in html5 with JSON.
The datalist is introduced in HTML5.
The <datalist> tag specifies a list of pre-defined options for an <input> element.
The HTML <datalist> tag is is used to provide an auto complete feature for an <input> element.
It provides a list of predefined options to the users to select data.
The <datalist> tag should be used with an <input> element that contains.
NOTE: The numbers of a browser that fully supports the <datalist> element: internet explorer, firefox, opera mini, and Google but it Not Support in Safari and Older Browsers.
This Autocomplete is written in Struts2, you can use this Autocomplete in anywhere in your Application.
This is struts.xml code
This is Action or Controller class which contains fetchEmployeeSuggestion Method. In this Method, we are fetching userInput of TextField which we type in JSP. Then we are getting Data From Database by calling by findEmployeeSuggestion of Dao Class which is returning Bean Class Object by setting value from a Database call.
 |
| Datalist in html5 |
The datalist is introduced in HTML5.
The <datalist> tag specifies a list of pre-defined options for an <input> element.
The HTML <datalist> tag is is used to provide an auto complete feature for an <input> element.
It provides a list of predefined options to the users to select data.
The <datalist> tag should be used with an <input> element that contains.
NOTE: The numbers of a browser that fully supports the <datalist> element: internet explorer, firefox, opera mini, and Google but it Not Support in Safari and Older Browsers.
This Autocomplete is written in Struts2, you can use this Autocomplete in anywhere in your Application.
This is JSP code.
<body><script type="text/javascript"> //here getEmployeeList function which called when we enterText in field function getEmployeeList(empSuggestion, empSuggestionlist) { var val = document.getElementById("" + empSuggestion).value; if (val.length > 4) { //if field is grt then 4 then calling Controller class //Replaced with fetchEmployeeSuggestion Your Controller name $.getJSON("fetchEmployeeSuggestion", {userInput: val}, function (json) { //console.log("Back from Json"+JSON.stringify(json)); $('#' + empSuggestionlist + '').empty(); $('#' + empSuggestionlist + '').append(new Option("Select", "-1", true, false)); for (var i = 0; i < json.employee.length; i++) { $('#' + empSuggestionlist).append(''); } }); }} </script> </body>
This is Bean Class or Model Class which contain getter and setter
public class Employee {
public String empCode;
public String empName;
public String designation;
public String locCode;
public String locName;
public String psaCode;
public String psa;
public String locType;
public String locTypeDesc;
public String designationLong;
public String divisionCd;
// getter setter\\\
}
This is struts.xml code
This is Action or Controller class which contains fetchEmployeeSuggestion Method. In this Method, we are fetching userInput of TextField which we type in JSP. Then we are getting Data From Database by calling by findEmployeeSuggestion of Dao Class which is returning Bean Class Object by setting value from a Database call.
public String findMatchingEmployee() {
System.err.println("input field value" + userInput);
EmployeeDAO empDao = new EmployeeDAO();
employee = empDao.findEmployeeSuggestion(a[a.length - 1].trim());
return "success";
}
This is DaoClass,in this Class we are return ArrayList as a response to Controller class.
public ArrayList<Employee> findEmployeeSuggestion(String userInput) {
Connection con = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
ArrayList<Employee> empList = null;
try {
con = ConnectionManager.getConnectionFromPool();
String employeeSuggestion="select empdb.emp_code,empdb.emp_name,empdb.design_short_desc from employee empdb";
try {
pstmt = con.prepareStatement(employeeSuggestion);
empList = new ArrayList<Employee>();
try {
Employee emp = null;
rs = pstmt.executeQuery();
while (rs.next()) {
emp = new Employee();
emp.setEmpCode(rs.getString("emp_code"));
emp.setEmpName(rs.getString("emp_name"));
emp.setShortDesc(rs.getString("design_short_desc "));
empList .add(emp);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (rs != null) {
rs.close();
rs = null;
}}
} catch (Exception e) {
} finally {
if (pstmt != null) {
pstmt.close();
pstmt = null;
}
}
} catch (Exception e) {
} finally {
try {
if (con != null) {
ConnectionManager.closeConnection(con);
con = null;
}
} catch (Exception e) {
}}
return empList;
}
Post a Comment