代码如下

index.html文件,保保存成index.htm

Home Backend Development PHP Tutorial jquery php Baidu search box smart prompt effect_PHP tutorial

jquery php Baidu search box smart prompt effect_PHP tutorial

Jul 20, 2016 am 11:10 AM
jquery php use accomplish hint search Effect yes intelligent Baidu of program this

This program uses php+ajax+jquery to achieve a Baidu-like smart prompt effect. Friends in need can download and test it.

Let’s take a look at the effect first

The code is as follows

index.html file, save it as index.htm

The code is as follows Copy code td>
 代码如下 复制代码




Ajax Auto Suggest


 .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;
 }


 


  

   

    Type your county:
    

    
   

   
   
  

 





Ajax Auto Suggest




Type your county:



< ;/div> ="position: relative; top: -12px; left: 30px;" alt="jquery php Baidu search box smart prompt effect_PHP tutorial" />

 




php文件

 代码如下 复制代码
 代码如下 复制代码

 
    mysql教程_connect('localhost', 'root' ,'root');
 mysql_select_db("autoComplete"); 
 
 $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'];
     echo '

  • '.$value.'
  • ';
        }

       }
     
    ?>

     
        mysql教程_connect('localhost', 'root' ,'root');
     mysql_select_db("autoComplete"); 
     
     $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'];
         echo '
  • '.$value.'
  • ';
        }   }
     
    ?>

    sql.sql Copy and save this to your database tutorial

    The code is as follows Copy the code

    -- phpMyAdmin SQL Dump
    -- version 3.3.5
    -- http://www.phpmyadmin.net
    --
    -- Host: localhost
    -- Generation date : December 09, 2010 02:36
    -- Server version: 5.0.22
    -- PHP version: 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=@@COLL ATION_CONNECTION* /;
    /*!40101 SET NAMES utf8 */;

    --
    -- Database: `autoComplete`
    --

    -- ---- -------------------------------------------------- --

    --
    -- Table structure `countries`
    --

    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=latin1 AUTO_INCREMENT=243 ;

    --
    -- Transfer the data in the table `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, 'Congo'),
    (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');

     

    注:里面有个jquery文件没有放上来,大家可以到http://down.php100.com下载或者到百度搜索


    www.bkjia.comtruehttp://www.bkjia.com/PHPjc/444742.htmlTechArticle这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有需要的朋友可以下载测试哦。 先来看看效果 代码如下 index.html文件,保保...
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Hot Topics

    Java Tutorial
    1664
    14
    PHP Tutorial
    1268
    29
    C# Tutorial
    1246
    24
    PHP and Python: Comparing Two Popular Programming Languages PHP and Python: Comparing Two Popular Programming Languages Apr 14, 2025 am 12:13 AM

    PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.

    PHP in Action: Real-World Examples and Applications PHP in Action: Real-World Examples and Applications Apr 14, 2025 am 12:19 AM

    PHP is widely used in e-commerce, content management systems and API development. 1) E-commerce: used for shopping cart function and payment processing. 2) Content management system: used for dynamic content generation and user management. 3) API development: used for RESTful API development and API security. Through performance optimization and best practices, the efficiency and maintainability of PHP applications are improved.

    PHP: A Key Language for Web Development PHP: A Key Language for Web Development Apr 13, 2025 am 12:08 AM

    PHP is a scripting language widely used on the server side, especially suitable for web development. 1.PHP can embed HTML, process HTTP requests and responses, and supports a variety of databases. 2.PHP is used to generate dynamic web content, process form data, access databases, etc., with strong community support and open source resources. 3. PHP is an interpreted language, and the execution process includes lexical analysis, grammatical analysis, compilation and execution. 4.PHP can be combined with MySQL for advanced applications such as user registration systems. 5. When debugging PHP, you can use functions such as error_reporting() and var_dump(). 6. Optimize PHP code to use caching mechanisms, optimize database queries and use built-in functions. 7

    The Enduring Relevance of PHP: Is It Still Alive? The Enduring Relevance of PHP: Is It Still Alive? Apr 14, 2025 am 12:12 AM

    PHP is still dynamic and still occupies an important position in the field of modern programming. 1) PHP's simplicity and powerful community support make it widely used in web development; 2) Its flexibility and stability make it outstanding in handling web forms, database operations and file processing; 3) PHP is constantly evolving and optimizing, suitable for beginners and experienced developers.

    PHP vs. Python: Understanding the Differences PHP vs. Python: Understanding the Differences Apr 11, 2025 am 12:15 AM

    PHP and Python each have their own advantages, and the choice should be based on project requirements. 1.PHP is suitable for web development, with simple syntax and high execution efficiency. 2. Python is suitable for data science and machine learning, with concise syntax and rich libraries.

    PHP and Python: Code Examples and Comparison PHP and Python: Code Examples and Comparison Apr 15, 2025 am 12:07 AM

    PHP and Python have their own advantages and disadvantages, and the choice depends on project needs and personal preferences. 1.PHP is suitable for rapid development and maintenance of large-scale web applications. 2. Python dominates the field of data science and machine learning.

    PHP vs. Other Languages: A Comparison PHP vs. Other Languages: A Comparison Apr 13, 2025 am 12:19 AM

    PHP is suitable for web development, especially in rapid development and processing dynamic content, but is not good at data science and enterprise-level applications. Compared with Python, PHP has more advantages in web development, but is not as good as Python in the field of data science; compared with Java, PHP performs worse in enterprise-level applications, but is more flexible in web development; compared with JavaScript, PHP is more concise in back-end development, but is not as good as JavaScript in front-end development.

    PHP and Python: Different Paradigms Explained PHP and Python: Different Paradigms Explained Apr 18, 2025 am 12:26 AM

    PHP is mainly procedural programming, but also supports object-oriented programming (OOP); Python supports a variety of paradigms, including OOP, functional and procedural programming. PHP is suitable for web development, and Python is suitable for a variety of applications such as data analysis and machine learning.

    See all articles