Asynchronous data transfer based on JQuery and DWR
- 2021-08-28 19:26:38
- OfStack
In the background, I use DWR for asynchronous data transfer:
The code is very simple, that is, it returns an array, which can be modified by itself if the requirements are different:
package org.dwr.re;
/**
* Test Return Array
* @author Cui Suqiang
*/
public class BackArray {
public String[] backArr() {
String[] arr = new String[] { " Stick to ", " Is ", " Victory " };
return arr;
}
}
The foreground remembers to import JS for DWR and JS for JQuery, and then write the input event for the text box:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>" rel="external nofollow" >
<title> Automatic completion </title>
<script type='text/javascript' src='/buquan/dwr/util.js'></script>
<script type='text/javascript' src='/buquan/dwr/engine.js'></script>
<script type='text/javascript' src='/buquan/dwr/interface/arr.js'></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var highlightindex = -1; // Highlight node
var timeOutId;
$(document).ready(function() {
var wordInput = $("#keyText"); // Text box value
var wordInputOffset = wordInput.offset(); // Text box properties
// Initial time layer hiding , And set its style , Position
$("#auto").hide().css("border","1px black solid")
.css("position","absolute")
.css("top",wordInputOffset.top + wordInput.height() + 5 + "px")
.css("left",wordInputOffset.left + "px")
.width(wordInput.width() + 5);
// Text Box Events
$("#keyText").keyup(function(){
var myEvent = event || window.event;
var keyCode = myEvent.keyCode; // Get the value of the key
var autoNode = $("#auto");
// Enter letters, etc., including carriage return, delete
if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {
autoNode.html("");
var wordText=$("#keyText").val(); // Current text box value
if (wordText != ""){
// Will go up 1 Purge of incomplete requests
clearTimeout(timeOutId);
// Delay a request
timeOutId = setTimeout(function(){
// Use DWR Return data, no parameters are set temporarily, return 1 An array of strings can be used
arr.backArr(function back(data){
for(i = 0;i < data.length;i++){
var newDiv = $("<div>").attr("id",i); // Add identity
newDiv.html(data[i]).appendTo(autoNode); // Create a new node to the original DIV Element
// Mouse move-in event
newDiv.mouseover(function(){
if(highlightindex != -1){
$("#auto").children("div").eq(highlightindex)
.css("background-color","white");
}
// Increase 1 Attributes
highlightindex = $(this).attr("id");
// Currently set to red
$(this).css("background-color","red");
});
// Mouse removal event
newDiv.mouseout(function(){
// Current erase color
$(this).css("background-color","white");
});
// Mouse click event
newDiv.click(function(){
// Take out the text content of the highlighted node
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
highlightindex = -1;
// The contents of the text box become the contents of the highlighted node
$("#keyText").val(comText);
});
}
if (data.length > 0){
autoNode.show();
}else{
autoNode.hide();
}
});
},500); // Delay processing
} else {
autoNode.hide();
}
highlightindex = -1;
} else if (keyCode == 38 || keyCode == 40) {
if (keyCode == 38) { // Up
var autoNodes = $("#auto").children("div")
if (highlightindex != -1) {
// If there is a highlighted node, rename the background color white
autoNodes.eq(highlightindex).css("background-color","white");
highlightindex--;
} else {
highlightindex = autoNodes.length - 1;
}
if (highlightindex == -1) {
// If after modifying the index value, index Become -1 The index value points to the last 1 Elements
highlightindex = autoNodes.length - 1;
}
// Turn the highlighted content into red
autoNodes.eq(highlightindex).css("background-color","red");
}
if (keyCode == 40) { // Downward
var autoNodes = $("#auto").children("div")
if (highlightindex != -1) {
// If there is a highlighted node, rename the background color white
autoNodes.eq(highlightindex).css("background-color","white");
}
highlightindex++;
if (highlightindex == autoNodes.length) {
// If after modifying the index value, index Become -1 The index value points to the last 1 Elements
highlightindex = 0;
}
// Turn the highlighted content into red
autoNodes.eq(highlightindex).css("background-color","red");
}
} else if (keyCode == 13) {
// Drop-down box with highlighted content
if (highlightindex != -1) {
// Take out the text content of the highlighted node
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
highlightindex = -1;
// The contents of the text box become the contents of the highlighted node
$("#keyText").val(comText);
} else {
// Drop-down box has no highlighting
alert(" In the text box [" + $("#keyText").val() + "] Was submitted ");
}
}
});
});
</script>
</head>
<body>
<input type="text" id="keyText" name="keyText" width="50px" />
<div id="auto" align="left"></div>
</body>
</html>
When you input, will go to the background query and display some data, you can use the up and down keys to operate, enter the auto-submission of data!