ÏÈÀ´Á½¸öЧ¹ûͼ£º
href="/upload8/allimg/c111119/13216393J12950-4LM.png">
src="/upload8/allimg/c111119/13216393J12950-4LM.png" alt="autocomplete_1" width="250" height="148" />
JavaScript´úÂë
<script src="jquery-1.2.1.pack.js" type="text/javascript"></script> <script type="text/javascript"> function lookup(inputString) { if(inputString.length == 0) { // Hide the suggestion box. $(¡®#suggestions¡¯).hide(); } else { $.post("rpc.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $(¡®#suggestions¡¯).show(); $(¡®#autoSuggestionsList¡¯).html(data); } }); } } // lookup function fill(thisValue) { $(¡®#inputString¡¯).val (thisValue); $(¡®#suggestions¡¯).hide(); } </script> JSµÄ½âÊÍ
ºÃ£¬´ÓÉÏÃæµÄ´úÂë¿´µ½£¬ÎÒÃÇÐèÒªÁ¬½Óµ½Ò»¸ö½Ð×örpc.phpµÄÎļþ£¬Õâ¸öÎļþ´¦ÀíËùÓеIJÙ×÷¡£
lookupº¯ÊýʹÓôÓÎı¾ÊäÈë¿òÖеõ½µÄµ¥´ÊÈ»ºóʹÓÃjQueryÖÐAjaxµÄ·½·¨POST°ÑËü´«¸ørpc.php¡£
Èç¹ûÊäÈë×Ö·û ¡®inputString¡¯ÊÇ¡®0¡¯£¨Zero£¬Òë×¢£ºÔÚÕâÀïÊÇÖ¸ÔÚËÑË÷¿òÖÐûÊäÈë
ÈκÎÄÚÈÝ£©£¬½¨Òé¿ò¾Í±»Òþ²Ø£¬ÕâÒ²ºÜÈËÐÔ»¯£¬ÄãÏ룬Èç¹ûÔÚËÑË÷¿òÖÐûÓÐÊäÈëÈκζ«Î÷£¬ÄãÒ²²»ÆÚÍû»á³öÏÖ¸ö½¨ÒéÌáʾ¿ò¡£
Èç¹ûÊäÈë¿òÖÐÓÐÄÚÈÝ£¬ÎÒÃǾ͵õ½ÁËÕâ¸ö ¡®inputString¡¯²¢´«µÝ
¸ørpc.phpÒ³Ã棬ȻºójQuery µÄ$.post()º¯Êý±»Ê¹Óã¬ÈçÏ£º
$.post(url, [data], [callback])
¡®callback¡¯²¿·Ö¿ÉÒÔ¹ØÁªÒ»¸öº¯Êý£¬Õâ¸ö±È½ÏÓÐÒâ˼£¬Ö»ÓÐÔÚÊý¾Ý£¨data£©±»¼ÓÔسÉ
¹¦µÄʱºò²Å»áÖ´ÐУ¨Òë×¢£º´Ë´¦ÎªÒâÒ룬û¿´¶®ÔÎÄ:<£©.
Èç¹û·µ»ØµÄÊý¾Ý£¨data£©²»Îª¿Õ£¨Ò²¾ÍÊÇ˵£¬Óж«Î÷ÒªÏÔʾ£©£¬ÄǾÍÏÔʾËÑË÷Ìáʾ¿ò²¢ÇÒʹÓ÷µ»ØµÄÊý¾Ý£¨data£©À´´úÌæÆäÖеÄ
html´úÂë¡£
¾ÍÕâô¼òµ¥£¡
PHPºǫ́³ÌÐò£¨rpc.php£©
ÈçÄãËùÖª£¨Òë×¢£º²»ºÃÒâ˼£¬¿´ÍõС²¨¾Íѧ»áÁËÕâô¸ö¿ÚÍ·ìø£©£¬ÎÒµÄphpºǫ́³ÌÐò¶¼½Ð×örpc.php£¨RPCÖ¸Ô¶³Ì¹ý³Ìµ÷Óã©£¬
¶øûÓÃËüʵ¼ÊÖ´ÐеŦÄÜÀ´ÃüÃû£¬µ«ÊÇÒ²»¹²»´íÁË¡£
// PHP5 Implementation - uses MySQLi. $db = new mysqli(¡®localhost¡¯, ¡®root¡¯ ,¡±, ¡®autoComplete¡¯); if(!$db) { // Show error if we cannot connect. echo ¡®ERROR: Could not connect to the database.¡¯; } else { // Is there a posted query string? if(isset($_POST [¡®queryString¡¯])) { $queryString = $_POST[¡®queryString¡¯]; // Is the string length greater than 0? if(strlen($queryString) >0) { // Run the query: We use LIKE ¡®$queryString%¡¯ // The percentage sign is a wild-card, in my example of countries it works like this¡ // $queryString = ¡®Uni¡¯; // Returned data = ¡®United States, United Kindom¡¯;$query = $db->query("SELECT value FROM countries WHERE value LIKE ¡®$queryString%¡¯ LIMIT 10"); if($query) { // While there are results loop through them - fetching an Object (i like PHP5 btw!). while ($result = $query ->fetch_object()) { // Format the results, im using <li> for the list, you can change it. // The onClick function fills the textbox with the result. echo '<li onclick="fill('.$result->value.');">'.$result- >value.'</li>'; } } else { echo ¡®ERROR: There was a problem with the query.¡¯; } } else { // Dont do anything. } // There is a queryString. } else { echo ¡®There should be no direct access to this script!¡¯; } } ?>
PHP´úÂë½âÊÍ
¼øÓÚ´úÂëÖÐÎÒÒѾ¼ÓÁ˺ܶà×¢ÊÍ£¬ÔÚÕâÀïÎҾͲ»ÔÙ˵µÄºÜÏêϸÁË¡£
Ò»
°ãÇé¿öÏ£¬ÐèÒª½ÓÊÕÕâ¸ö ¡®QueryString¡¯ È»ºóÔÚÆä×îºóʹÓÃͨÅä·û²úÉúÒ»¸ö²éѯÓï¾ä¡£
ÕâÒâζ×ÅÔÚÕâÖÖÇé¿öÏ£¬Ã¿´ÎÇýøÈ¥Ò»¸ö×Ö·û¶¼ÐèÒª²úÉúÒ»¸ö²éѯÓï¾ä£¬Èç¹ûÒ»Ö±¶¼ÕâÑù×öµÄ»°£¬¿ÖÅÂ
MYSQL»áÊܲ»ÁË¡£µ«ÊÇΪÁ˾¡Á¿µÄ¼ò»¯Õâ¸ö¹ý³Ì£¬ÕâÖÖ×ö·¨¶ÔÒ»¸ö¹æÄ£½ÏСµÄÓ¦ÓÃÓ¦¸ÃûʲôÎÊÌâ¡£
Õâ¶Îphp´úÂëÄãÐèÒªÔÚ×Ô¼ºµÄϵͳÖÐÉÔ×÷Ð޸ģ¬±ÈÈçÄãÐèÒª¸üС®$query¡¯µ½Äã×Ô¼ºµÄÊý¾Ý¿â£¬Ðè
Òª¿´ÔÚÄÄÀï·ÅÄãÊý¾Ý¿â±íµÄÁÐÃûµÈµÈ¡£
CSSÑùʽ
ÎÒʹÓõÄÊÇCSS3£¬ÌìÄÄ£¬ËüÕæµÄºÜºÃÓã¬ËäÈ»ÔÚFirefox »òÕßSafariä¯ÀÀÆ÷ÉÏ»áÓй¦ÄÜÏÞÖÆ¡£
<style type="text/css"> .suggestionsBox { position: relative; left: 30px; margin: 10px 0px 0px 0px; width: 200px; background-color: #212427; -moz-border-radius: 7px; -webkit-border-radius: 7px; border: 2px solid #000; color: #fff; } .suggestionList { margin: 0px; padding: 0px; } .suggestionList li { margin: 0px 0px 3px 0px; padding: 3px; cursor: pointer; } .suggestionList li:hover { background-color: #659CD8; } </style> CSS´úÂ붼ºÜ±ê×¼£¬Ã»Ê²Ã´ÐèÒªÌرð Ö¸³öµÄ¡£ Ö÷ÎļþHTML <div><div> Type your county (for the demo): <input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" /> </div><div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="upArrow.png" alt="upArrow" style="position:relative;top:- 12px;left:30px" /> <div class="suggestionList" id="autoSuggestionsList"> </div> </div> </div>
ÕâÊÇÖ÷ÎļþµÄ²¿·Öhtml´úÂ룬ÄãÐèÒªÌí
¼ÓµÄ¾ÍÊÇÒ»¸öÊäÈë¿ò£¬²¢ÇÒ°Ñ ¡®onkeyup¡¯ º¯ÊýÉèÖÃΪlookup(this.value)¡£ÁíÍ⣬ÎÒ½¨ÒéÄã²»ÒªÐÞ¸ÄËüµÄID£¬Èç¹ûÄã²»ÏëÐÞ¸ÄÉÏÃæµÄJavascript´úÂëµÄ»°¡£
title="autocomplete_1" src="/upload8/allimg/c111119/13216393J12950-4LM.png" alt="autocomplete_1" width="250" height="148" />
class="dean_ch">»¹ÓУ¬
href="http://www.jqueryajax.com/wp-content/uploads/2009/03/autocomplete_2.png">
src="http://www.jqueryajax.com/wp-content/uploads/2009/03/autocomplete_2.png" alt="autocomplete_2" width="262" height="311" />
×îºó¾ÍÊÇÓÐÓõÄÁ´½ÓÁË£¬ÎÒÏëÄãÓ¦¸ÃÆÚ´ý
ºÜ¾ÃÁË¡£
Demo: Auto Complete Demo
Source ZIP:
href="http://nodstrum.com/wp-content/plugins/DownloadCounter/download.php?id=26">AutoComplete Source ZIP