Servlet + Ajax implements the smart prompt function of the Smart Search box, servletajax
Use the prompt in the search box to intelligently change the search box with the refreshing new technology.
Basic Principles:
1. Write the js binding event onkeyup (during keyboard input) and onfocus for the search box (when the mouse clicks outside the search box, clear the prompt)
2. first, obtain user input, and then transmit the obtained data to the server. The server transmits the data to the backend. the backend obtains the data sent from the server for processing, obtains the associated data, and returns the json format to the front-end, the front-end parses the returned json into text through the callback function, and transmits the text to the display window below the search box.
The following is a json-supported jar package:
Search. jsp
<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN "" http://www.w3.org/TR/html4/loose.dtd "> <Html>SearchServlet. class
Package com. ninka; import java. io. IOException; import java. util. arrayList; import java. util. list; import javax. servlet. servletException; import javax. servlet. http. httpServlet; import javax. servlet. http. httpServletRequest; import javax. servlet. http. httpServletResponse; import net. sf. json. JSONArray; public class SearchServlet extends HttpServlet {static List <String> datas = new ArrayList <String> (); static {datas. add ("ajax1"); datas. add ("ajax2"); datas. add ("ajax3"); datas. add ("bichi1"); datas. add ("bichi2"); datas. add ("php"); datas. add ("javascript"); datas. add ("java"); datas. add ("html") ;}@ Override protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// set the encoding format request. setCharacterEncoding ("UTF-8"); response. setCharacterEncoding ("UTF-8"); System. out. println ("123"); // first obtain the data sent from the client. Note that the passed parameter keyword must be written to the correct String. Otherwise, the NULL pointer exception String keyword = request will occur. getParameter ("keyword"); // get the keyword and process it to obtain the associated data List <String> listData = getData (keyword); // return the json format System. out. println (JSONArray. fromObject (listData); // JSONArray. fromObject (listData); response. getWriter (). write (JSONArray. fromObject (listData ). toString ();} // obtain the associated data method public List <String> getData (String keyword) {List <String> list = new ArrayList <String> (); for (String data: datas) {// if the transmitted data is in the dictionary, package the data containing keywords into a list and send if (data. contains (keyword) {list. add (data) ;}} return list ;}}Web. xml
<? Xml version = "1.0" encoding = "UTF-8"?> <Web-app xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" xmlns = "http://xmlns.jcp.org/xml/ns/javaee" xsi: schemaLocation = "http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id = "WebApp_ID" version = "3.1"> <display-name> ajaxtest </display-name> <welcome-file-list> <welcome-file> search. jsp </welcome-file> </welcome-file-list> <servlet> <! -- Why search? When defining a url in js, search --> <servlet-name> search </servlet-name> <servlet-class> com. ninka. searchServlet </servlet-class> </servlet> <servlet-mapping> <servlet-name> search </servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>The above section describes how to use Servlet + Ajax to implement the smart prompt function of the Smart Search box. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!
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
