jquery php百度搜索框智能提示效果 -php手册-PHP中文网

首页

php教程

php手册

jquery php百度搜索框智能提示效果

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 25, 2016 pm 04:38 PM

这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有需要的朋友可以下载测试,代码如下:

index.html文件,保保存成index.htm,代码如下:

<!DOCTYPE html> 
<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.
        $(&#39;#suggestions&#39;).hide();
    } else {
        $.post("rpc.php", {
            queryString : "" + inputString + ""
        }, function (data) {
            if (data.length > 0) {
                $(&#39;#suggestions&#39;).show();
                $(&#39;#autoSuggestionsList&#39;).html(data);
            }
        });
    }
 } // lookup
 function fill(thisValue) {
    $(&#39;#inputString&#39;).val(thisValue);
    setTimeout("$(&#39;#suggestions&#39;).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="/static/imghw/default1.png"  data-src="upArrow.png"  class="lazy"     style="max-width:90%" alt="upArrow" /> 
    <div class="suggestionList" id="autoSuggestionsList"> 
       
    </div> 
   </div> 
  </form> 
 </div> 
</body> 
</html> 
php文件,代码如下:
<?php 
    mysql_connect(&#39;localhost&#39;, &#39;root&#39; ,&#39;root&#39;); 
 mysql_select_db("autoComplete");  
 $queryString = $_POST[&#39;queryString&#39;]; 
   //开源代码phprm.com 
   if(strlen($queryString) >0) { 
    $sql= "SELECT value FROM countries WHERE value LIKE &#39;".$queryString."%&#39; LIMIT 10"; 
    $query = mysql_query($sql); 
    while ($result = mysql_fetch_array($query,MYSQL_BOTH)){      
     $value=$result[&#39;value&#39;]; 
     echo &#39;<li onClick="fill(&#39;&#39;.$value.&#39;&#39;);">&#39;.$value.&#39;</li>&#39;; 
    } 
   }
?>

登录后复制

sql.sql把这里复制保存到你的数据库,代码如下:

-- phpMyAdmin SQL Dump 
-- version 3.3.5 
-- http://www.phpmyadmin.net 
-- 
-- 主机: localhost 
-- 生成日期: 2010 年 12 月 09 日 02:36 
-- 服务器版本: 5.0.22 
-- PHP 版本: 5.2.14 
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; 
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; 
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; 
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 
/*!40101 SET NAMES utf8 */; 
-- 
-- 数据库: `autoComplete` 
-- 
-- -------------------------------------------------------- 
-- 
-- 表的结构 `countries` 
-- 
CREATE TABLE IF NOT EXISTS `countries` ( 
  `id` int(6) NOT NULL auto_increment, 
  `value` varchar(250) NOT NULL default &#39;&#39;, 
  PRIMARY KEY  (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=243 ; 
-- 
-- 转存表中的数据 `countries` 
-- 
INSERT INTO `countries` (`id`, `value`) VALUES 
(1, &#39;Afghanistan&#39;), 
(2, &#39;Aringland Islands&#39;), 
(3, &#39;Albania&#39;), 
(4, &#39;Algeria&#39;), 
(5, &#39;American Samoa&#39;), 
(6, &#39;Andorra&#39;), 
(7, &#39;Angola&#39;), 
(8, &#39;Anguilla&#39;), 
(9, &#39;Antarctica&#39;), 
(10, &#39;Antigua and Barbuda&#39;), 
(11, &#39;Argentina&#39;), 
(12, &#39;Armenia&#39;), 
(13, &#39;Aruba&#39;), 
(14, &#39;Australia&#39;), 
(15, &#39;Austria&#39;), 
(16, &#39;Azerbaijan&#39;), 
(17, &#39;Bahamas&#39;), 
(18, &#39;Bahrain&#39;), 
(19, &#39;Bangladesh&#39;), 
(20, &#39;Barbados&#39;), 
(21, &#39;Belarus&#39;), 
(22, &#39;Belgium&#39;), 
(23, &#39;Belize&#39;), 
(24, &#39;Benin&#39;), 
(25, &#39;Bermuda&#39;), 
(26, &#39;Bhutan&#39;), 
(27, &#39;Bolivia&#39;), 
(28, &#39;Bosnia and Herzegovina&#39;), 
(29, &#39;Botswana&#39;), 
(30, &#39;Bouvet Island&#39;), 
(31, &#39;Brazil&#39;), 
(32, &#39;British Indian Ocean territory&#39;), 
(33, &#39;Brunei Darussalam&#39;), 
(34, &#39;Bulgaria&#39;), 
(35, &#39;Burkina Faso&#39;), 
(36, &#39;Burundi&#39;), 
(37, &#39;Cambodia&#39;), 
(38, &#39;Cameroon&#39;), 
(39, &#39;Canada&#39;), 
(40, &#39;Cape Verde&#39;), 
(41, &#39;Cayman Islands&#39;), 
(42, &#39;Central African Republic&#39;), 
(43, &#39;Chad&#39;), 
(44, &#39;Chile&#39;), 
(45, &#39;China&#39;), 
(46, &#39;Christmas Island&#39;), 
(47, &#39;Cocos (Keeling) Islands&#39;), 
(48, &#39;Colombia&#39;), 
(49, &#39;Comoros&#39;), 
(50, &#39;Congo&#39;), 
(51, &#39;Congo&#39;), 
(52, &#39; Democratic Republic&#39;), 
(53, &#39;Cook Islands&#39;), 
(54, &#39;Costa Rica&#39;), 
(55, &#39;Ivory Coast (Ivory Coast)&#39;), 
(56, &#39;Croatia (Hrvatska)&#39;), 
(57, &#39;Cuba&#39;), 
(58, &#39;Cyprus&#39;), 
(59, &#39;Czech Republic&#39;), 
(60, &#39;Denmark&#39;), 
(61, &#39;Djibouti&#39;), 
(62, &#39;Dominica&#39;), 
(63, &#39;Dominican Republic&#39;), 
(64, &#39;East Timor&#39;), 
(65, &#39;Ecuador&#39;), 
(66, &#39;Egypt&#39;), 
(67, &#39;El Salvador&#39;), 
(68, &#39;Equatorial Guinea&#39;), 
(69, &#39;Eritrea&#39;), 
(70, &#39;Estonia&#39;), 
(71, &#39;Ethiopia&#39;), 
(72, &#39;Falkland Islands&#39;), 
(73, &#39;Faroe Islands&#39;), 
(74, &#39;Fiji&#39;), 
(75, &#39;Finland&#39;), 
(76, &#39;France&#39;), 
(77, &#39;French Guiana&#39;), 
(78, &#39;French Polynesia&#39;), 
(79, &#39;French Southern Territories&#39;), 
(80, &#39;Gabon&#39;), 
(81, &#39;Gambia&#39;), 
(82, &#39;Georgia&#39;), 
(83, &#39;Germany&#39;), 
(84, &#39;Ghana&#39;), 
(85, &#39;Gibraltar&#39;), 
(86, &#39;Greece&#39;), 
(87, &#39;Greenland&#39;), 
(88, &#39;Grenada&#39;), 
(89, &#39;Guadeloupe&#39;), 
(90, &#39;Guam&#39;), 
(91, &#39;Guatemala&#39;), 
(92, &#39;Guinea&#39;), 
(93, &#39;Guinea-Bissau&#39;), 
(94, &#39;Guyana&#39;), 
(95, &#39;Haiti&#39;), 
(96, &#39;Heard and McDonald Islands&#39;), 
(97, &#39;Honduras&#39;), 
(98, &#39;Hong Kong&#39;), 
(99, &#39;Hungary&#39;), 
(100, &#39;Iceland&#39;), 
(101, &#39;India&#39;), 
(102, &#39;Indonesia&#39;), 
(103, &#39;Iran&#39;), 
(104, &#39;Iraq&#39;), 
(105, &#39;Ireland&#39;), 
(106, &#39;Israel&#39;), 
(107, &#39;Italy&#39;), 
(108, &#39;Jamaica&#39;), 
(109, &#39;Japan&#39;), 
(110, &#39;Jordan&#39;), 
(111, &#39;Kazakhstan&#39;), 
(112, &#39;Kenya&#39;), 
(113, &#39;Kiribati&#39;), 
(114, &#39;Korea (north)&#39;), 
(115, &#39;Korea (south)&#39;), 
(116, &#39;Kuwait&#39;), 
(117, &#39;Kyrgyzstan&#39;), 
(118, &#39;Lao People&#39;&#39;s Democratic Republic&#39;), 
(119, &#39;Latvia&#39;), 
(120, &#39;Lebanon&#39;), 
(121, &#39;Lesotho&#39;), 
(122, &#39;Liberia&#39;), 
(123, &#39;Libyan Arab Jamahiriya&#39;), 
(124, &#39;Liechtenstein&#39;), 
(125, &#39;Lithuania&#39;), 
(126, &#39;Luxembourg&#39;), 
(127, &#39;Macao&#39;), 
(128, &#39;Macedonia&#39;), 
(129, &#39;Madagascar&#39;), 
(130, &#39;Malawi&#39;), 
(131, &#39;Malaysia&#39;), 
(132, &#39;Maldives&#39;), 
(133, &#39;Mali&#39;), 
(134, &#39;Malta&#39;), 
(135, &#39;Marshall Islands&#39;), 
(136, &#39;Martinique&#39;), 
(137, &#39;Mauritania&#39;), 
(138, &#39;Mauritius&#39;), 
(139, &#39;Mayotte&#39;), 
(140, &#39;Mexico&#39;), 
(141, &#39;Micronesia&#39;), 
(142, &#39;Moldova&#39;), 
(143, &#39;Monaco&#39;), 
(144, &#39;Mongolia&#39;), 
(145, &#39;Montserrat&#39;), 
(146, &#39;Morocco&#39;), 
(147, &#39;Mozambique&#39;), 
(148, &#39;Myanmar&#39;), 
(149, &#39;Namibia&#39;), 
(150, &#39;Nauru&#39;), 
(151, &#39;Nepal&#39;), 
(152, &#39;Netherlands&#39;), 
(153, &#39;Netherlands Antilles&#39;), 
(154, &#39;New Caledonia&#39;), 
(155, &#39;New Zealand&#39;), 
(156, &#39;Nicaragua&#39;), 
(157, &#39;Niger&#39;), 
(158, &#39;Nigeria&#39;), 
(159, &#39;Niue&#39;), 
(160, &#39;Norfolk Island&#39;), 
(161, &#39;Northern Mariana Islands&#39;), 
(162, &#39;Norway&#39;), 
(163, &#39;Oman&#39;), 
(164, &#39;Pakistan&#39;), 
(165, &#39;Palau&#39;), 
(166, &#39;Palestinian Territories&#39;), 
(167, &#39;Panama&#39;), 
(168, &#39;Papua New Guinea&#39;), 
(169, &#39;Paraguay&#39;), 
(170, &#39;Peru&#39;), 
(171, &#39;Philippines&#39;), 
(172, &#39;Pitcairn&#39;), 
(173, &#39;Poland&#39;), 
(174, &#39;Portugal&#39;), 
(175, &#39;Puerto Rico&#39;), 
(176, &#39;Qatar&#39;), 
(177, &#39;Runion&#39;), 
(178, &#39;Romania&#39;), 
(179, &#39;Russian Federation&#39;), 
(180, &#39;Rwanda&#39;), 
(181, &#39;Saint Helena&#39;), 
(182, &#39;Saint Kitts and Nevis&#39;), 
(183, &#39;Saint Lucia&#39;), 
(184, &#39;Saint Pierre and Miquelon&#39;), 
(185, &#39;Saint Vincent and the Grenadines&#39;), 
(186, &#39;Samoa&#39;), 
(187, &#39;San Marino&#39;), 
(188, &#39;Sao Tome and Principe&#39;), 
(189, &#39;Saudi Arabia&#39;), 
(190, &#39;Senegal&#39;), 
(191, &#39;Serbia and Montenegro&#39;), 
(192, &#39;Seychelles&#39;), 
(193, &#39;Sierra Leone&#39;), 
(194, &#39;Singapore&#39;), 
(195, &#39;Slovakia&#39;), 
(196, &#39;Slovenia&#39;), 
(197, &#39;Solomon Islands&#39;), 
(198, &#39;Somalia&#39;), 
(199, &#39;South Africa&#39;), 
(200, &#39;South Georgia and the South Sandwich Islands&#39;), 
(201, &#39;Spain&#39;), 
(202, &#39;Sri Lanka&#39;), 
(203, &#39;Sudan&#39;), 
(204, &#39;Suriname&#39;), 
(205, &#39;Svalbard and Jan Mayen Islands&#39;), 
(206, &#39;Swaziland&#39;), 
(207, &#39;Sweden&#39;), 
(208, &#39;Switzerland&#39;), 
(209, &#39;Syria&#39;), 
(210, &#39;Taiwan&#39;), 
(211, &#39;Tajikistan&#39;), 
(212, &#39;Tanzania&#39;), 
(213, &#39;Thailand&#39;), 
(214, &#39;Togo&#39;), 
(215, &#39;Tokelau&#39;), 
(216, &#39;Tonga&#39;), 
(217, &#39;Trinidad and Tobago&#39;), 
(218, &#39;Tunisia&#39;), 
(219, &#39;Turkey&#39;), 
(220, &#39;Turkmenistan&#39;), 
(221, &#39;Turks and Caicos Islands&#39;), 
(222, &#39;Tuvalu&#39;), 
(223, &#39;Uganda&#39;), 
(224, &#39;Ukraine&#39;), 
(225, &#39;United Arab Emirates&#39;), 
(226, &#39;United Kingdom&#39;), 
(227, &#39;United States of America&#39;), 
(228, &#39;Uruguay&#39;), 
(229, &#39;Uzbekistan&#39;), 
(230, &#39;Vanuatu&#39;), 
(231, &#39;Vatican City&#39;), 
(232, &#39;Venezuela&#39;), 
(233, &#39;Vietnam&#39;), 
(234, &#39;Virgin Islands (British)&#39;), 
(235, &#39;Virgin Islands (US)&#39;), 
(236, &#39;Wallis and Futuna Islands&#39;), 
(237, &#39;Western Sahara&#39;), 
(238, &#39;Yemen&#39;), 
(239, &#39;Zaire&#39;), 
(240, &#39;Zambia&#39;), 
(241, &#39;Zimbabwe&#39;);

登录后复制

注:里面有个jquery文件没有放上来,大家可以下载jquery库.

文章网址:

随意转载^^但请附上教程地址。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn