The SuggestFramework usage prompt is displayed in a google-like search.

Source: Internet
Author: User

I. First, let's take a look at what suggest framework is.
Suggest Framework is a small Framework like Google Suggest, so that your text box has a prompt function. With the suggest framework, you can easily implement the "input prompt" effect on your website. This effect will greatly improve the user experience and search efficiency.
Multiple Search boxes can appear on a page, and each search box can be configured separately.
This framework has no browser restrictions and is basically compatible with the vast majority of current browsers, including Internet Explorer 5 + (Win/Mac), Firefox (Win/Mac), and Opera 8 +.

II. The following describes how to install
You only need to copy SuggestFramework. js to your server, and then customize the css style of the prompt effect to implement personalized search prompts.
Css style files need to be prepared by yourself and added to every page.
Supplement: SuggestFramework. js has tried Dojo ShrinkSafe for compression, please see the http://alex.dojotoolkit.org/shrinksafe/

3. introduce how to use
Add the following two sentences to the
<Script type = "text/javascript" src = "/path/to/SuggestFramework. js"> </script>
<Script type = "text/javascript"> window. onload = initializeSuggestFramework; </script>
With the above two sentences, each text box with a name will have five more attributes:
1. action is required. Accept the data submitted in GET mode, and return the dynamic page of the related Javascript array.
2. If capture returns more than one column (such as the words and Chinese meanings in this example), it will replace the column entered by the user (starting from 1 ). This usually corresponds to the database field.
Optional. The default value is 1.
3. columns drop-down lists the number of columns. For example, in this example, you can query words by letter and display the Chinese meaning on the right. Optional. The default value is 1.
4. 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 ).
5. If heading is set to true, the first array value will be 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.

Only two data items are required for data submission.
1. name of the type input box
2. q search keywords (default UTF-8 encoding)
The compressed package you downloaded already contains php and ColdFusion examples. Of course, this framework can be applied to all programming languages with no platform restrictions. The background data output is a Javascript statement. Write a one-dimensional array as follows:
New Array ("val1", "val2", "val3 ″);

Write the two-dimensional array as follows:
New Array (
New Array ("1st rows, 1st Columns", "1st rows, 2nd Columns "),
New Array ("2nd rows, 1st Columns", "1st rows, 2nd Columns "),
New Array ("3rd rows, 1st Columns", "1st rows, 2nd Columns ")
);

Finally, we will introduce the four classes to be defined in css.
. SuggestFramework_List indicates the region where the content is located.
. SuggestFramework_Heading first prompt
. SuggestFramework_Highlighted
. SuggestFramework_Normal other prompts

4. Tips: If Garbled text or javascript script errors occur, use the following method.
1. Add a GB2312 to UTF-8 function to the page that returns data in the background (for example, display. asp), which converts the content read from the database to UTF-8 encoding.
2. if the background is an asp page, add the <[email = % @ LANGUAGE = "VBSCRIPT] % @ LANGUAGE =" VBSCRIPT [/email] "CODEPAGE =" 936 "%> command in the first line of the Code.
3. Save the page (such as display. asp) file that returns data in the background to the UTF-8 format.
E text address: http://sourceforge.net/project/shownotes.php? Group_id = 145701 & release_id = 399504
Official: http://sourceforge.net/project/showfiles.php? Group_id = 145701

Related Article

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.