JSP page code:
<% @ Page Language = "Java" pageencoding = "UTF-8" %>
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
<HTML>
<Head>
<Title> AutoComplete -- similar to google_suggest </title>
<SCRIPT type = "text/JavaScript" src = "JS/jquery. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "JS/autocomplete. js"> </SCRIPT>
</Head>
<Body>
<Li> jquery instance: the drop-down prompt in the input box is similar to Google suggest <input type = "text" id = "word"/>
<Input type = "button" id = "bt_sub" value = "Submit"/> <br/>
<Div id = "Auto"> </div>
</Body>
</Html>
Background servlet code:
Import java. Io. ioexception;
Import javax. servlet. servletexception;
Import javax. servlet. http. httpservlet;
Import javax. servlet. http. httpservletrequest;
Import javax. servlet. http. httpservletresponse;
Public class AutoComplete extends httpservlet {
Protected void doget (httpservletrequest request, httpservletresponse response)
Throws servletexception, ioexception {
Dopost (request, response );
}
Protected void dopost (httpservletrequest request, httpservletresponse response)
Throws servletexception, ioexception {
// Indicates the character string sent from the page, which is used to match words on the server.
String word = request. getparameter ("word ");
// Save the string in the request object
Request. setattribute ("Word", word );
// Forward the request to the view layer
Request. getrequestdispatcher ("wordxml. jsp"). Forward (request, response );
}
}
Configure servlet in Web. xml:
<? XML version = "1.0" encoding = "UTF-8"?>
<Web-app version = "2.4" xmlns = "http://java.sun.com/xml/ns/j2ee"
Xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance"
Xsi: schemalocation = "http://java.sun.com/xml/ns/j2ee
Http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd>
<Servlet>
<Servlet-Name> AutoComplete </servlet-Name>
<Servlet-class> AutoComplete </servlet-class>
</Servlet>
<Servlet-mapping>
<Servlet-Name> AutoComplete </servlet-Name>
<URL-pattern>/AutoComplete </url-pattern>
</Servlet-mapping>
</Web-app>
The JSP that stores the data, simulating the data transmitted from the background, is not used for display:
<% @ Page contenttype = "text/XML; charset = UTF-8" Language = "Java" %>
<! -- Unlike the traditional view layer, this JSP returns XML data, so the value of contenttype is text/XML -->
<%
String word = (string) request. getattribute ("word ");
%>
<Words>
<% IF ("absolute". startswith (Word) {%>
<Word> absolute </word>
<% }%>
<% IF ("anyone". startswith (Word) {%>
<Word> anyone </word>
<% }%>
<% IF ("anything". startswith (Word) {%>
<Word> anything </word>
<% }%>
<% IF ("apple". startswith (Word) {%>
<Word> Apple </word>
<% }%>
<% IF ("abandon". startswith (Word) {%>
<Word> abandon </word>
<% }%>
<% IF ("breach". startswith (Word) {%>
<Word> breach </word>
<% }%>
<% IF ("Boolean". startswith (Word) {%>
<Word> Boolean </word>
<% }%>
<% IF ("break". startswith (Word) {%>
<Word> Break </word>
<% }%>
<% IF ("CREATE". startswith (Word) {%>
<Word> Create </word>
<% }%>
</Words>
Finally, the most important JavaScript code:
VaR highlightindex =-1; // defines the highlighted Index
VaR timeoutid; // defines the delay time.
$ (Document). Ready (function (){
VaR wordinput = $ ("# Word ");
VaR wordinputoffset = wordinput. offset ();
// Hide the auto-completion box and define CSS attributes
$ ("# Auto"). Hide ()
. CSS ("position", "absolute ")
. CSS ("border", "1px black solid ")
. CSS ("TOP", wordinputoffset. Top + wordinput. Height () + 5 + "PX ")
. CSS ("Left", wordinputoffset. Left + "PX ")
. Width (wordinput. Width () + 2 );
// Add an event to the text box that is triggered by pressing the keyboard
Wordinput. keyup (function (event ){
VaR myevent = event | window. event;
VaR keycode = myevent. keycode;
VaR autonode = $ ("# auto ");
If (keycode> = 65 & keycode <= 90 | keycode = 8 | keycode = 46 ){
// Enter a letter, unregister or delete it, and display the latest content.
VaR wordtext = $ ("# Word"). Val ();
If (wordtext! = ""){
Timeoutid = setTimeout (function (){
$. Post ("AutoComplete", {word: wordtext}, function (data ){
VaR jqueryobj = $ (data );
VaR wordnodes = jqueryobj. Find ("word ");
Autonode.html ("");
Wordnodes. Each (function (I ){
VaR wrodnode = $ (this );
VaR newdivnode = $ ("<div>"). ATTR ("ID", I );
Newdivnode.html (wrodnode. Text (). appendto (autonode );
// Add the cursor to the event and highlight the node
Newdivnode. Mouseover (function (){
If (highlightindex! =-1 ){
$ ("# Auto"). Children ("Div ")
. Eq (highlightindex)
. CSS ("background-color", "White ");
}
Highlightindex = $ (this). ATTR ("ID ");
Certificate (this).css ("background-color", "gray ");
});
// Add a cursor removal event to cancel highlighting
Newdivnode. mouseout (function (){
Certificate (this).css ("background-color", "White ");
});
// Add a cursor Click Event
Newdivnode. Click (function (){
VaR comtext = $ (this). Text ();
$ ("# Auto"). Hide ();
Highlightindex =-1;
$ ("# Word"). Val (comtext );
});
});
If (wordnodes. length> 0 ){
Autonode. Show ();
} Else {
Autonode. Hide ();
Highlightindex =-1;
}
}, "XML ");
},500 );
} Else {
Autonode. Hide ();
Highlightindex =-1;
}
} Else if (keycode = 38 ){
// Input up and select the highlighted text
VaR autonodes = $ ("# auto"). Children ("Div ")
If (highlightindex! =-1 ){
Autonodes.eq(highlightindex).css ("background-color", "White ");
Highlightindex --;
} Else {
Highlightindex = autonodes. Length-1;
}
If (highlightindex =-1 ){
Highlightindex = autonodes. Length-1;
}
Autonodes.eq(highlightindex).css ("background-color", "gray ");
} Else if (keycode = 40 ){
// Enter down to highlight the selected text
VaR autonodes = $ ("# auto"). Children ("Div ")
If (highlightindex! =-1 ){
Autonodes.eq(highlightindex).css ("background-color", "White ");
}
Highlightindex ++;
If (highlightindex = autonodes. Length ){
Highlightindex = 0;
}
Autonodes.eq(highlightindex).css ("background-color", "gray ");
} Else if (keycode = 13 ){
// Enter
If (highlightindex! =-1 ){
VaR comtext = $ ("# auto"). Hide (). Children ("Div"). eq (highlightindex). Text ();
Highlightindex =-1;
$ ("# Word"). Val (comtext );
} Else {
Alert ("[" + $ ("# Word"). Val () + "] in the text box is submitted! ");
$ ("# Auto"). Hide ();
$ ("# Word"). Get (0). Blur ();
}
}
});
// Add an event to the button, indicating that the data in the text box is submitted
$ ("# Bt_sub"). Click (function (){
Alert ("[" + $ ("# Word"). Val () + "] in the text box is submitted! ");
});
});
The above code runs OK in both Firefox and IE. When running, remember to introduce jquery. js.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
