Php+ajax Imitation Google dropdown box code three

Source: Internet
Author: User

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<style>
*{font:12px ' song Body '}
. tab_suggest{border:1px solid #333; background: #fff; position:absolute; z-index:101; visibility:hidden;}
. tab_suggest th, Tab_suggest td{font:12px ' XXFarEastFont-font-weight:normal; height:17px; text-align:left; line-height:17px; PADDING:2PX 3px; White-space:nowrap; Cursor:default;}
. tab_suggest Td{color: #008000; text-align:right;}
. tab_suggest tr.cur{background: #36c; color: #fff}
. tab_suggest tr.cur td{color: #fff}
</style>
<title> Untitled Document </title>
<script type= "Text/javascript" src= "Js/suggest.js" ></script>
<script type= "Text/javascript" >
Window.onload=function () {
var mysuggest = new Hansir. Textsuggest ();
Mysuggest.add_suggest (' textsuggest ', ' suggest.php ', ' post ');
Mysuggest.add_suggest (' TextSuggest2 ', ' suggest.php ', ' post ', 100);
$ (' textsuggest '). focus ();
}
</script>
<body>
<br/><br/>
<form action= "suggest.php" method= "POST" ><input type= "hidden" name= "Add" value= "Add"/>
No delay: <input type= "text" id= "textsuggest" name= "keyword" style= "width:300px;" autocomplete= "Off"/> <input Type= "Submit" value= "submitted"/>
</form>
<br/><br/><br/>
<form action= "suggest.php" method= "POST" ><input type= "hidden" name= "Add" value= "Add"/>
Delay 100ms:<input type= "text" id= "textSuggest2" name= "keyword" style= "width:300px;" autocomplete= "Off"/> < Input type= "Submit" value= "submitted"/>
</form>
</body>
The last HTML file.

Call:
background data is output in [[' Key characters ', ' estimated quantity '], [' Key characters ', ' estimated quantity '], ...] format.
page onload after calling (because there is a Body.appendchild method)
var mysuggest = new Hansir. Textsuggest ();
mysuggest.add_suggest (INP, URL, method, defer, defer2);
all but the first two are required, and the last three are optional
INP: Input box ID name.
Url:ajax The requested background server page address.
Method : The sender tries the GET or post, the default post.
defer: Key timing, that is, how long the user input characters after the request server, the default does not count when the user input characters immediately after sending.
Defer2: The server returns the result time, that is, the server sends the request after how long does not return the data, the list automatically hides, the default 200ms.
Test Instructions:
1, the database is stored in temporary data.
2, you can enter the "People's Republic of China", "Medium", "Blue" test.
3, you can enter some other custom data, submitted to the table, and then you can use the data just submitted to test.
4, my server slow speed, there may be individual card phenomenon.
5, Delay: User input characters after how long to request the server, care for input fast users:)
-If the server is fast enough to consider delay, it doesn't matter if it's slow, it's a request that's done to the next one:

Known defects:
1, Drop-down box location problem: Because it is the body as a reference, so the position will change with the body size (Drop-down list display when the drag window size to see the effect).
-Workaround: The actual time can be based on the input of the parent element positioning (This can also save some resources, that is, each display drop-down box to calculate the position).
2, with the Wubi input method in the FF input after completion of the key is not good to switch the input method can be, pinyin is normal.
-Solution: Google has the same problem, so ... :)。

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.