Imitation Google search hints suggestframework use _ajax related

Source: Internet
Author: User
Tags php and
First, take a look at what is the Suggest framework
Suggest framework is the name of the idea, is a copy of Google suggest a small framework, so that your text box also has a hint function. With the Suggest framework you can easily implement the "input hint" effect on your website, which will greatly improve the user experience and improve search efficiency.
Multiple search boxes can appear on one page, and each search box can be configured individually.
This framework has no browser limitations and is basically compatible with most of the current browsers, including Internet Explorer 5+ (WIN/MAC), Firefox (Win/mac), Opera 8+, and so on.

Two. Let me explain how to install
You just need to copy the suggestframework.js to your server and then customize the hint effect of the CSS style to achieve personalized search tips.
and CSS style files, you need to do it yourself, and add to each page.
Add: Suggestframework.js has tried dojo Shrinksafe for compression, please see http://alex.dojotoolkit.org/shrinksafe/

Three. Then describe how to use
In 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 named text box will have five more attributes:
1.action must be. Accepts data submitted by Get method and returns a dynamic page of related Javascript arrays.
2.capture if more than one column of results is returned (for example, the words in this example and the Chinese meaning), the column (starting from 1) will be substituted for the user input. Usually this corresponds to the database field.
Optionally, the default is 1.
3.columns Drop-down Display of the number of columns, such as in this example, the word query by letter, and the Chinese meaning on the right. Optionally, the default is 1.
4.delay query delay, the unit is in milliseconds. Lower latency can get quicker responses, but it can add to the server burden. Optionally, the default is 1000 (1 seconds).
5.heading if set to True, the first array value will be an optional item (title bar). This is useful when you have two or more columns of data. Optionally, the default is False.

Data submission requires only two data
Name of the 1.type input box
2.Q search Keywords (default UTF-8 encoding)
The compression package you downloaded already contains examples of PHP and ColdFusion, which, of course, can be applied to all programming languages without platform limitations. The background data output is a Javascript statement. One-dimensional arrays write this:
New Array ("Val1″," Val2″, "Val3″");

Two-dimensional arrays write this:
New Array (
New Array (1th line, 1th column, 1th row, 2nd column),
New Array (2nd line, 1th column, 1th line 2nd column),
New Array (3rd line, 1th column, 1th line 2nd column)
);

Finally, the 4 classes that need to be defined in CSS
. Suggestframework_list the area where the content is being prompted
. Suggestframework_heading First Clue
. Suggestframework_highlighted set a hint for highlighting
. Suggestframework_normal Other Tips

Four. Hint, if garbled or JavaScript script error, please use the following method to solve.
1. Add a GB2312-UTF-8 function to a page that returns data in the background (for example, display.asp), using this function to convert the contents of the database into UTF-8 encoding.
2. If the background is an ASP page, the first line of code adds <[email=% @LANGUAGE = "vbscript]% @LANGUAGE =" Vbscript[/email] "codepage=" 936″%> instructions.
3. A page that returns data in the background (for example, display.asp) is stored in the UTF-8 format.
E Text Address: http://sourceforge.net/project/shownotes.php?group_id=145701&release_id=399504
Official Download Address: http://sourceforge.net/project/showfiles.php?group_id=145701

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.