- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>AJAX</title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <style type="text/css" media="screen">
- .onmouset_out {
- font-family:Arial, Helvetica, sans-serif;
- font-size:12px;
- font-color:#000000;
- background-color: #ffffff;
- padding: 2px 6px 2px 4px;
- cursor:pointer;
- }
- .onmouset_over {
- font-family:Arial, Helvetica, sans-serif;
- font-size:12px;
- font-color:#000000;
- background-color: #3366cc;
- padding: 2px 6px 2px 4px;
- cursor:pointer;
- }
- #result_display {
- display:none;
- width:200px;
- height:240px;
- overflow-y:auto;
- border:1px solid #000000;
- position:absolute;
- }
- </style>
- <script type="text/javascript">
- var xmlHttp;
- function createXmlHttp() {
- if (window.XMLHttpRequest) {
- xmlHttp = new XMLHttpRequest();
- } else {
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
- var handle_name="";
- var targetPos;
- function inputSuggest(obj) {
- var txtValue;
- var url;
- targetPos=obj;
- if(obj.id=="firstname"){
- txtValue= document.getElementById(obj.id).value;
- url = "ajax.jsp?f=" + txtValue+"&suggest=1";
- handle_name="handle_firstname";
- }
- if(obj.id=="lastname"){
- txtValue= document.getElementById(obj.id).value;
- url = "ajax.jsp?l=" + txtValue+"&suggest=1";
- handle_name="handle_lastname";
- }
- createXmlHttp();
- xmlHttp.onreadystatechange = _handle;
- xmlHttp.open("GET",url,true);
- xmlHttp.send(null);
- url=null;
- }
- function CPos(x, y)
- {
- this.x = x;
- this.y = y;
- }
- function GetObjPos(ATarget)
- {
- var target = ATarget;
- var pos = new CPos(target.offsetLeft, target.offsetTop);
- var targettarget = target.offsetParent;
- while (target)
- {
- pos.x += target.offsetLeft;
- pos.y += target.offsetTop;
- targettarget = target.offsetParent
- }
- return pos;
- }
- function _handle() {
- if(xmlHttp.readyState==4){
- if(xmlHttp.status==200){
- var showDiv=document.getElementById('result_display');
- showDiv.innerHTML = xmlHttp.responseText;
- //set position
- showDiv.style.left=GetObjPos(targetPos)["x"];
- showDiv.style.top=GetObjPos(targetPos)["y"]+targetPos.offsetHeight;
- showDiv.style.display="block";
- }
- }
- }
- function setSuggestValue(value,handle) {
- if(handle=="handle_firstname"){
- document.getElementById('firstname').value = value;
- }
- if(handle=="handle_lastname"){
- document.getElementById('lastname').value = value;
- }
- document.getElementById('result_display').innerHTML = '';
- document.getElementById('result_display').style.display="none";
- handle_name="";
- }
- </script>
- </head>
- <body>
- <h3>this is a suggest example:</h3>
- <form id="frmSearch" action="">
- <input type="text" id="firstname" name="firstname" alt="input" onkeyup="inputSuggest(this);" style="width:200px"/>
- <br>
- <input type="text" id="lastname" name="lastname" alt="input" onkeyup="inputSuggest(this);" style="width:200px"/>
- <input type="submit" id="search" value="search" alt="search"/><br />
- <div id="result_display">
- </div>
- </form>
- </body>
- </html>
- <%@page contentType="text/html; charset=UTF-8" import="java.sql.*"%>
- <%@page import="org.springframework.context.ApplicationContext"%>
- <%@page import="org.springframework.context.support.ClassPathXmlApplicationContext"%>
- <%@page import="com.sysium.openadaptor.hibernate.beans.SearchPerson"%>
- <html>
- <body>
- <%
- String sql_firstname="";
- String sql_lastname="";
- String suggest="";
- if(request.getParameter("f")!=null){
- sql_firstname = (String) request.getParameter("f");
- }
- if(request.getParameter("l")!=null){
- sql_lastname = (String) request.getParameter("l");
- }
- if(request.getParameter("suggest")!=null){
- suggest = (String) request.getParameter("suggest");
- }
- String str = "";
- if (suggest.equals("1")) {
- if (sql_firstname != "") {
- str = "select firstname from person where firstname like'%"
- + sql_firstname + "%'";
- }
- if (sql_lastname != "") {
- str = "select lastname from person where lastname like'%"
- + sql_lastname + "%'";
- }
- } else {
- if(sql_firstname != "" && sql_lastname != ""){
- str = "select pid,firstname,lastname from person where firstname like'%"
- + sql_firstname + "%' and lastname like '%"
- + sql_lastname + "%'";
- }else{
- str = "select pid,firstname,lastname from person where firstname like'%"
- + sql_firstname + "%' or lastname like '%"
- + sql_lastname + "%'";
- }
- }
- //String str1="select * from customers";
- ApplicationContext ctx = new ClassPathXmlApplicationContext(
- "../beans-config.xml");
- SearchPerson bean = (SearchPerson) ctx.getBean("searchPerson");
- Connection con = bean.getDataSource().getConnection();
- Statement stmt = con.createStatement();
- ResultSet rst = stmt.executeQuery(str);
- %>
- <%
- if (suggest.equals("1")){
- while (rst.next()) {
- if(sql_firstname!=""){
- %>
- <div class="onmouset_out" onmouseover="this.className='onmouset_over'" onmouseout="this.className='onmouset_out'" onclick="setSuggestValue(this.innerHTML,handle_name)">
- <%=rst.getString("firstname")%>
- </div>
- <%
- }
- if(sql_lastname!=""){
- %>
- <div class="onmouset_out" onmouseover="this.className='onmouset_over'" onmouseout="this.className='onmouset_out'" onclick="setSuggestValue(this.innerHTML,handle_name)">
- <%=rst.getString("lastname")%>
- </div>
- <%
- }
- }
- //關閉連接、釋放資源
- rst.close();
- stmt.close();
- con.close();
- }else{
- %>
- <select id="personinfo" name="personinfo" multiple="multiple" style="width:466px" size="18">
- <%
- while (rst.next()) {
- %>
- <option value="<%=rst.getString("pid")%>"><%=rst.getString("pid")%> <%=rst.getString("firstname")%> <%=rst.getString("lastname")%></option>
- <%
- }
- //關閉連接、釋放資源
- rst.close();
- stmt.close();
- con.close();
- %>
- </select>
- <%
- }
- %>
- </body>
- </html>