Home Backend Development PHP Tutorial PHP+ajax makes imitating Baidu search drop-down automatic prompt box (with examples)_PHP tutorial

PHP+ajax makes imitating Baidu search drop-down automatic prompt box (with examples)_PHP tutorial

Jul 21, 2016 pm 03:17 PM
php+ajax drop down Example accomplish hint search have Baidu automatic

php+mysql+ajax implements Baidu search drop-down prompt box. There are mainly 3 files. The three files are in the same directory as shown below
php+mysql+ajax实现百度搜索下拉提示框
The following is the code of the three files to import the sql file into the mysql database. Change the database password to your own and remember it is UTF-8 encoding

php+mysql+ajax to implement Baidu search drop-down prompt box
Rendering
php+mysql+ajax实现百度搜索下拉提示框
rpc.php file

Copy code The code is as follows:

mysql_connect('localhost', 'root' ,'' );
mysql_select_db("test");
$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.'
  • ';
    }
    }
    ?>

    index.htm file
    Copy code The code is as follows:





    Ajax Auto Suggest








    Type your county:










    sql database autoComplete.sql file (imported to mysql)
    Copy code The code is as follows:

    -- 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";
    --
    -- 数据库: `test`
    --
    -- --------------------------------------------------------
    --
    -- 表的结构 `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 ;
    --
    -- 转存表中的数据 `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');

    你在本地服务器测试下 一定很给力 而且原理很简单 没那么麻烦

    www.bkjia.comtruehttp://www.bkjia.com/PHPjc/325717.htmlTechArticlephp+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修...
    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

    AI Hentai Generator

    AI Hentai Generator

    Generate AI Hentai for free.

    Hot Article

    R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
    2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Best Graphic Settings
    2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. How to Fix Audio if You Can't Hear Anyone
    3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

    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)

    How to implement dual WeChat login on Huawei mobile phones? How to implement dual WeChat login on Huawei mobile phones? Mar 24, 2024 am 11:27 AM

    How to implement dual WeChat login on Huawei mobile phones? With the rise of social media, WeChat has become one of the indispensable communication tools in people's daily lives. However, many people may encounter a problem: logging into multiple WeChat accounts at the same time on the same mobile phone. For Huawei mobile phone users, it is not difficult to achieve dual WeChat login. This article will introduce how to achieve dual WeChat login on Huawei mobile phones. First of all, the EMUI system that comes with Huawei mobile phones provides a very convenient function - dual application opening. Through the application dual opening function, users can simultaneously

    After 2 months, the humanoid robot Walker S can fold clothes After 2 months, the humanoid robot Walker S can fold clothes Apr 03, 2024 am 08:01 AM

    Editor of Machine Power Report: Wu Xin The domestic version of the humanoid robot + large model team completed the operation task of complex flexible materials such as folding clothes for the first time. With the unveiling of Figure01, which integrates OpenAI's multi-modal large model, the related progress of domestic peers has been attracting attention. Just yesterday, UBTECH, China's "number one humanoid robot stock", released the first demo of the humanoid robot WalkerS that is deeply integrated with Baidu Wenxin's large model, showing some interesting new features. Now, WalkerS, blessed by Baidu Wenxin’s large model capabilities, looks like this. Like Figure01, WalkerS does not move around, but stands behind a desk to complete a series of tasks. It can follow human commands and fold clothes

    How to implement the WeChat clone function on Huawei mobile phones How to implement the WeChat clone function on Huawei mobile phones Mar 24, 2024 pm 06:03 PM

    How to implement the WeChat clone function on Huawei mobile phones With the popularity of social software and people's increasing emphasis on privacy and security, the WeChat clone function has gradually become the focus of people's attention. The WeChat clone function can help users log in to multiple WeChat accounts on the same mobile phone at the same time, making it easier to manage and use. It is not difficult to implement the WeChat clone function on Huawei mobile phones. You only need to follow the following steps. Step 1: Make sure that the mobile phone system version and WeChat version meet the requirements. First, make sure that your Huawei mobile phone system version has been updated to the latest version, as well as the WeChat App.

    deepseek web version entrance deepseek official website entrance deepseek web version entrance deepseek official website entrance Feb 19, 2025 pm 04:54 PM

    DeepSeek is a powerful intelligent search and analysis tool that provides two access methods: web version and official website. The web version is convenient and efficient, and can be used without installation; the official website provides comprehensive product information, download resources and support services. Whether individuals or corporate users, they can easily obtain and analyze massive data through DeepSeek to improve work efficiency, assist decision-making and promote innovation.

    Introduction to how to obtain Baidu Xiyang Shells Introduction to how to obtain Baidu Xiyang Shells Mar 28, 2024 am 09:11 AM

    There are many users in Xirang who don’t know where the shells are and how to get them. Some players have been searching for several hours but still can’t find them. Below, the editor will introduce how to obtain Baidu Xirang shells. Come and take a look. . How to get Baidu Xirang Shell 1. First we need to come to the community, and then come to the location in the picture below. 2. Select the destination here and choose to enter the 188th floor. 3. After entering the 188th floor, you will see this prompt when walking around. Just click I Got It. 4. The location of the shell may be a little difficult to find. Just behind the 188 elevator, there is a small glowing dot that is the shell. 5. You need to use a VR controller to pick up shells. Just click on the shell. Redemption method 1. First click the "Settings" icon in the upper right corner of the page and select "

    Baidu Apollo releases Apollo ADFM, the world's first large model that supports L4 autonomous driving Baidu Apollo releases Apollo ADFM, the world's first large model that supports L4 autonomous driving Jun 04, 2024 pm 08:01 PM

    On May 15, Baidu Apollo held Apollo Day 2024 in Wuhan Baidu Luobo Automobile Robot Zhixing Valley, comprehensively demonstrating Baidu's major progress in autonomous driving over the past ten years, bringing technological leaps based on large models and a new definition of passenger safety. With the world's largest autonomous vehicle operation network, Baidu has made autonomous driving safer than human driving. Thanks to this, safer, more comfortable, green and low-carbon travel methods are turning from ideal to reality. Wang Yunpeng, vice president of Baidu Group and president of the Intelligent Driving Business Group, said on the spot: "Our original intention to build autonomous vehicles is to satisfy people's growing yearning for better travel. People's satisfaction is our driving force. Because safety, So beautiful, we are happy to see

    How to search other people's resources on Alibaba Cloud Disk How to search other people's resources on Alibaba Cloud Disk Mar 30, 2024 am 10:31 AM

    Alibaba Cloud Disk, this popular storage tool, not only helps us manage personal resources efficiently, but also provides many convenient functions. So many users may not be able to find cloud disk resources when searching, so they want to search all resources in the entire disk. So below, the editor of this site will answer this question in detail and share the specific search method. Users who want to know, please come and follow this article to learn more! How to search other people's resources in Alibaba Cloud Disk 1. First, search the specific path of the resource file in the folder directory of Alibaba Cloud Disk to find the corresponding folder. 2. Then use the file search function and enter the keywords you want to find to find the relevant file content. 3. Then we share the link with others to directly locate and download

    Baidu Tieba app prompts that the operation is too frequent, what's the matter? Baidu Tieba app prompts that the operation is too frequent, what's the matter? Apr 01, 2024 pm 05:06 PM

    Baidu Tieba app prompts that the operation is too frequent. This prompt is usually to maintain the normal operation and user experience of the platform to prevent malicious screen spam, advertising spam and other inappropriate behaviors. For specific handling methods, you can read the tutorial shared by the editor. Baidu Tieba app prompts that the operation is too frequent. Sharing how to deal with it 1. When the system prompts [Operation is too frequent], we need to wait for a while. If you are anxious, you can do something else first. Generally, after waiting for a while, this prompt message will It will disappear automatically and we can use it normally. 2. If after waiting for a long time, it still displays [Operation Too Frequent], we can try to go to Tieba Emergency Bar, Tieba Feedback Bar and other official Tieba, post to report this phenomenon and ask official personnel to solve it. 3.

    See all articles