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!