jQuery¼¼Êõ

jQuery Ajax PHP MySQLʵÏÖ×Ô¶¯Íê³É¹¦ÄÜ

×ÖºÅ+ ×÷Õߣº À´Ô´£º 2014-11-16 22:49 ÎÒÒªÆÀÂÛ( )

ʹÓà jQuery Ajax PHP MySQLʵÏÖµÄËÑË÷×Ô¶¯Ìáʾ¹¦ÄÜ

ÏÈÀ´Á½¸öЧ¹ûͼ£º

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´úÂëµÄ»°¡£

½Øͼ

ÎÒÏëÄãÓ¦¸Ã»áÏëÒª¿´¿´×îºóµÄЧ¹ûÊÇʲôÑù×Ó£¬OK¡£

class="dean_ch">»¹ÓУ¬

×îºó¾ÍÊÇÓÐÓõÄÁ´½ÓÁË£¬ÎÒÏëÄãÓ¦¸ÃÆÚ´ý

ºÜ¾ÃÁË¡£

Demo: Auto Complete Demo

Source ZIP:

href="http://nodstrum.com/wp-content/plugins/DownloadCounter/download.php?id=26">AutoComplete Source ZIP

¡¡

1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎתÔصĸå¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬ÇëתÔØʱÎñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

Ïà¹ØÎÄÕÂ
  • 7¸öÓÐÓõÄjQueryС¼¼ÇÉ

    7¸öÓÐÓõÄjQueryС¼¼ÇÉ

    2016-02-26 13:02

  • jQueryÖÆ×÷selectË«ÏòÑ¡ÔñÁбí

    jQueryÖÆ×÷selectË«ÏòÑ¡ÔñÁбí

    2016-02-26 11:00

  • È«ÃæÏêϸµÄjQuery³£¼û¿ª·¢¼¼ÇÉÊÖ²á

    È«ÃæÏêϸµÄjQuery³£¼û¿ª·¢¼¼ÇÉÊÖ²á

    2016-02-26 10:02

  • Ç¿´óµÄjQueryÒƶ¯²å¼þTop 10

    Ç¿´óµÄjQueryÒƶ¯²å¼þTop 10

    2016-02-25 09:05

ÍøÓѵãÆÀ
£