Use suggestframework to develop effects similar to Google search prompts

Source: Internet
Author: User
Google and thunder search prompts that the results are quite comfortable, and there are many similar effects on the network, but they are all complicated Ajax, so that unskillful JavaScript friends can look at the top, suggestframework is the JS library dedicated to developing this effect. Reference it on the page, so you do not need to write complicated JS Code .

1. Download The suggestframeworkrepository from http://sourceforge.net/projects/suggest;

2. The use of suggestframework is very simple. reference the following two lines of code on the page that requires the effect: < Script Type = " Text/JavaScript " SRC = " /Path/to/suggestframework. js " > </ Script >
< Script Type = " Text/JavaScript " > Window. onload = Initializesuggestframework; </ Script >

3. After these two sentences are introduced, the text box on the page will have five special attributes:
Action Required. Accept the data submitted in get mode, and return the dynamic page of the related Javascript array.
Capture If more than one column is returned, the column entered by the user will be replaced (from 1 ). This usually corresponds to the database field. Optional. The default value is 1.
Columns The number of columns displayed in the drop-down list. Optional. The default value is 1.
Delay Query latency, in milliseconds. Low latency can produce faster responses, but will increase the burden on the server. Optional; 1000 (1 second) by default ).
Heading If it is set to true, the first array value is used as an optional item (title bar ). It is useful when there are two or more columns of data. Optional. The default value is false.
For example: < Input ID = "Example1" Type = "Text" Name = "Example1" Action = "Seachservlet. Do" Columns = "2" Capture = "2" />

4. Write a seachservlet. Do servlet to process the request (for simplicity, there is no connection to the database ): Package Com. Kay. servlet;

Import Java. Io. ioexception;
Import Java. Io. printwriter;
Import Javax. servlet. servletexception;
Import Javax. servlet. http. httpservlet;
Import Javax. servlet. http. httpservletrequest;
Import Javax. servlet. http. httpservletresponse;

Public   Class Seachservlet
Extends Httpservlet
{

Public Seachservlet ()
{
Super();
}

Public   Void Destroy ()
{
Super. Destroy ();//Just puts "Destroy" string in log
//Put your code here
}
Public   Void Doget (httpservletrequest request, httpservletresponse response)
Throws Servletexception, ioexception
{

Printwriter out = response. getwriter ();
Out. println ("new array (");
Out. println ("new array ('maine', 'D '),");
Out. println ("new array ('maine ',''),");
Out. println ("new array ('maine ',''),");
Out. println ("new array ('maine ',''),");
Out. println ("new array ('maine ',''),");
Out. println ("new array ('maine ','')");
Out. println (");");
Out. Flush ();
Out. Close ();
}


Public   Void Dopost (httpservletrequest request, httpservletresponse response)
Throws Servletexception, ioexception
{

Doget (request, response );
}


Public   Void Init ()
Throws Servletexception
{
}

}

In this way, we can see the effect on the page. Of course, you can also set the CSS style:
. Suggestframework_list drop-down box window
. Suggestframework_heading title bar
. Suggestframework_highlighted highlight Option
. Suggestframework_normal normal option

In this example, there is a code file, and a friend in need can leave a mail.

Recently added:

the original code is no longer available because of formatting the hard disk. Sorry! However, I hope you can use the above example and thank you again for your visit!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.