jQuery/Ajax, PHP and Mysql Autosuggest
Table countries
CREATE TABLE IF NOT EXISTS `countries` (
`id` int(6) NOT NULL AUTO_INCREMENT,
`country` varchar(250) NOT NULL DEFAULT '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=243 ;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery/Ajax, PHP and Mysql Autosuggest </title><script>function suggest(inputString){ if(inputString.length == 0) { $('#suggestions').fadeOut(); } else { $('#country').addClass('load'); $.post("data.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $('#suggestions').fadeIn(); $('#suggestionsList').html(data); $('#country').removeClass('load'); } }); }}function fill(thisValue) { $('#country').val(thisValue); setTimeout("$('#suggestions').fadeOut();", 600);}</script><style>#country { width:200px; padding:3px; font-size:110%; vertical-align:middle;}.suggestionsBox { width: 200px; color: #fff; margin:0; padding:0; background:#86BAC7; top:0; left:0;}.suggestionList { margin: 0px; padding: 0px;}.suggestionList ul li { list-style:none; margin: 0px; padding: 6px; border-bottom:1px dotted #98BE56; cursor: pointer;}.suggestionList ul li:hover { background-color: #006E89; color:#000;}ul { font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFF; padding:0; margin:0;}.load{background-image:url(img/loader.gif);background-position:right;background-repeat:no-repeat;}#suggest { position:relative;}.sf_active{ border:2px #8BB544 solid; background:#fff; color:#333;}</style></head><body><form id="form" action="#"> <div id="suggest">Start to type a country: <br /> <input type="text" size="25" value="" id="country" onkeyup="suggest(this.value);" onblur="fill();" class="sf_active" /> <div class="suggestionsBox" id="suggestions" style="display: none;"> <div class="suggestionList" id="suggestionsList"> </div> </div></div></form></body></html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | //data.php<?php $link = mysql_connect('localhost', 'root', ''); if (!$link) { die('Could not connect: ' . mysql_error()); } mysql_select_db("test"); if(isset($_POST['queryString'])) { $queryString = $_POST['queryString']; if(strlen($queryString) >0) { $query = mysql_query("SELECT country FROM countries WHERE country LIKE '$queryString%' LIMIT 10"); if($query) { echo '<ul>'; while ($result = mysql_fetch_array($query)) { echo '<li onClick="fill(\''.addslashes($result["country"]).'\');">'.$result["country"].'</li>'; } echo '</ul>'; } else { echo 'OOPS we had a problem :('; } } else { } } else { echo 'There should be no direct access to this script!'; }?> |
