jquery+php实现类似百度搜索框智能提示效果
发布时间：2020-05-25 07:18:38 所属栏目：PHP 来源：互联网
导读：jquery+php实现类似百度搜索框智能提示效果
|
下面是脚本之家 jb51.cc 通过网络收集整理的代码片段。 脚本之家小编现在分享给大家，也给大家做个参考。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto Suggest</title>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></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);
setTimeout("$('#suggestions').hide();",200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.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>
</head>
<body>
<div>
<form>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
</body>
</html>
php文件 <?php
header('content-type:text/html;charset=utf-8');
mysql_connect('localhost','root','');
mysql_select_db("test");
mysql_query("set names utf8");
$queryString = $_POST['queryString'];
if(strlen($queryString) >0) {
$sql= "SELECT value FROM countries WHERE value LIKE '".$queryString."%' LIMIT 10";
$query = mysql_query($sql);
while ($result = mysql_fetch_array($query,MYSQL_BOTH)){
$value=$result['value'];
?>
<li onClick="fill('<?=$value?>')"><?=$value?></li>
<?php
}
}
?>
sql.sql把这里复制保存到你的数据库教程 CREATE TABLE IF NOT EXISTS `countries` (
`id` int(6) NOT NULL auto_increment,`value` varchar(250) NOT NULL default '',PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=243 ;
--
-- 转存表中的数据 `countries`
--
INSERT INTO `countries` (`id`,`value`) VALUES
(1,'Afghanistan'),(2,'Aringland Islands'),(3,'Albania'),(4,'Algeria'),(5,'American Samoa'),(6,'Andorra'),(7,'Angola'),(8,'Anguilla'),(9,'Antarctica'),(10,'Antigua and Barbuda'),(11,'Argentina'),(12,'Armenia'),(13,'Aruba'),(14,'Australia'),(15,'Austria'),(16,'Azerbaijan'),(17,'Bahamas'),(18,'Bahrain'),(19,'Bangladesh'),(20,'Barbados'),(21,'Belarus'),(22,'Belgium'),(23,'Belize'),(24,'Benin'),(25,'Bermuda'),(26,'Bhutan'),(27,'Bolivia'),(28,'Bosnia and Herzegovina'),(29,'Botswana'),(30,'Bouvet Island'),(31,'Brazil'),(32,'British Indian Ocean territory'),(33,'Brunei Darussalam'),(34,'Bulgaria'),(35,'Burkina Faso'),(36,'Burundi'),(37,'Cambodia'),(38,'Cameroon'),(39,'Canada'),(40,'Cape Verde'),(41,'Cayman Islands'),(42,'Central African Republic'),(43,'Chad'),(44,'Chile'),(45,'China'),(46,'Christmas Island'),(47,'Cocos (Keeling) Islands'),(48,'Colombia'),(49,'Comoros'),(50,'Congo'),(51,(52,' Democratic Republic'),(53,'Cook Islands'),(54,'Costa Rica'),(55,'Ivory Coast (Ivory Coast)'),(56,'Croatia (Hrvatska)'),(57,'Cuba'),(58,'Cyprus'),(59,'Czech Republic'),(60,'Denmark'),(61,'Djibouti'),(62,'Dominica'),(63,'Dominican Republic'),(64,'East Timor'),(65,'Ecuador'),(66,'Egypt'),(67,'El Salvador'),(68,'Equatorial Guinea'),(69,'Eritrea'),(70,'Estonia'),(71,'Ethiopia'),(72,'Falkland Islands'),(73,'Faroe Islands'),(74,'Fiji'),(75,'Finland'),(76,'France'),(77,'French Guiana'),(78,'French Polynesia'),(79,'French Southern Territories'),(80,'Gabon'),(81,'Gambia'),(82,'Georgia'),(83,'Germany'),(84,'Ghana'),(85,'Gibraltar'),(86,'Greece'),(87,'Greenland'),(88,'Grenada'),(89,'Guadeloupe'),(90,'Guam'),(91,'Guatemala'),(92,'Guinea'),(93,'Guinea-Bissau'),(94,'Guyana'),(95,'Haiti'),(96,'Heard and McDonald Islands'),(97,'Honduras'),(98,'Hong Kong'),(99,'Hungary'),(100,'Iceland'),(101,'India'),(102,'Indonesia'),(103,'Iran'),(104,'Iraq'),(105,'Ireland'),(106,'Israel'),(107,'Italy'),(108,'Jamaica'),(109,'Japan'),(110,'Jordan'),(111,'Kazakhstan'),(112,'Kenya'),(113,'Kiribati'),(114,'Korea (north)'),(115,'Korea (south)'),(116,'Kuwait'),(117,'Kyrgyzstan'),(118,'Lao People''s Democratic Republic'),(119,'Latvia'),(120,'Lebanon'),(121,'Lesotho'),(122,'Liberia'),(123,'Libyan Arab Jamahiriya'),(124,'Liechtenstein'),(125,'Lithuania'),(126,'Luxembourg'),(127,'Macao'),(128,'Macedonia'),(129,'Madagascar'),(130,'Malawi'),(131,'Malaysia'),(132,'Maldives'),(133,'Mali'),(134,'Malta'),(135,'Marshall Islands'),(136,'Martinique'),(137,'Mauritania'),(138,'Mauritius'),(139,'Mayotte'),(140,'Mexico'),(141,'Micronesia'),(142,'Moldova'),(143,'Monaco'),(144,'Mongolia'),(145,'Montserrat'),(146,'Morocco'),(147,'Mozambique'),(148,'Myanmar'),(149,'Namibia'),(150,'Nauru'),(151,'Nepal'),(152,'Netherlands'),(153,'Netherlands Antilles'),(154,'New Caledonia'),(155,'New Zealand'),(156,'Nicaragua'),(157,'Niger'),(158,'Nigeria'),(159,'Niue'),(160,'Norfolk Island'),(161,'Northern Mariana Islands'),(162,'Norway'),(163,'Oman'),(164,'Pakistan'),(165,'Palau'),(166,'Palestinian Territories'),(167,'Panama'),(168,'Papua New Guinea'),(169,'Paraguay'),(170,'Peru'),(171,'Philippines'),(172,'Pitcairn'),(173,'Poland'),(174,'Portugal'),(175,'Puerto Rico'),(176,'Qatar'),(177,'Runion'),(178,'Romania'),(179,'Russian Federation'),(180,'Rwanda'),(181,'Saint Helena'),(182,'Saint Kitts and Nevis'),(183,'Saint Lucia'),(184,'Saint Pierre and Miquelon'),(185,'Saint Vincent and the Grenadines'),(186,'Samoa'),(187,'San Marino'),(188,'Sao Tome and Principe'),(189,'Saudi Arabia'),(190,'Senegal'),(191,'Serbia and Montenegro'),(192,'Seychelles'),(193,'Sierra Leone'),(194,'Singapore'),(195,'Slovakia'),(196,'Slovenia'),(197,'Solomon Islands'),(198,'Somalia'),(199,'South Africa'),(200,'South Georgia and the South Sandwich Islands'),(201,'Spain'),(202,'Sri Lanka'),(203,'Sudan'),(204,'Suriname'),(205,'Svalbard and Jan Mayen Islands'),(206,'Swaziland'),(207,'Sweden'),(208,'Switzerland'),(209,'Syria'),(210,'Taiwan'),(211,'Tajikistan'),(212,'Tanzania'),(213,'Thailand'),(214,'Togo'),(215,'Tokelau'),(216,'Tonga'),(217,'Trinidad and Tobago'),(218,'Tunisia'),(219,'Turkey'),(220,'Turkmenistan'),(221,'Turks and Caicos Islands'),(222,'Tuvalu'),(223,'Uganda'),(224,'Ukraine'),(225,'United Arab Emirates'),(226,'United Kingdom'),(227,'United States of America'),(228,'Uruguay'),(229,'Uzbekistan'),(230,'Vanuatu'),(231,'Vatican City'),(232,'Venezuela'),(233,'Vietnam'),(234,'Virgin Islands (British)'),(235,'Virgin Islands (US)'),(236,'Wallis and Futuna Islands'),(237,'Western Sahara'),(238,'Yemen'),(239,'Zaire'),(240,'Zambia'),(241,'Zimbabwe');
以上是脚本之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。 如果觉得脚本之家网站内容还不错，欢迎将脚本之家网站推荐给程序员好友。 （编辑：安卓应用网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |