Heim Backend-Entwicklung PHP-Tutorial php+ajax做仿百度搜索下拉自动提示框(有实例)_PHP教程

php+ajax做仿百度搜索下拉自动提示框(有实例)_PHP教程

Jul 21, 2016 pm 03:17 PM
php+ajax runterfallen 实例 实现 提示 搜索 haben 百度 自动

php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图
php+mysql+ajax实现百度搜索下拉提示框
下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码

php+mysql+ajax实现百度搜索下拉提示框
效果图
php+mysql+ajax实现百度搜索下拉提示框
rpc.php文件

复制代码 代码如下:

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文件
    复制代码 代码如下:





    Ajax Auto Suggest








    Type your county:










    sql数据库autoComplete.sql文件(导入到mysql)
    复制代码 代码如下:

    -- 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数据库里 修...
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    AI Hentai Generator

    AI Hentai Generator

    Erstellen Sie kostenlos Ai Hentai.

    Heißer Artikel

    R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
    3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Beste grafische Einstellungen
    3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
    3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    Nach 2 Monaten kann der humanoide Roboter Walker S Kleidung falten Nach 2 Monaten kann der humanoide Roboter Walker S Kleidung falten Apr 03, 2024 am 08:01 AM

    Herausgeber des Machine Power Report: Wu Xin Die heimische Version des humanoiden Roboters + eines großen Modellteams hat zum ersten Mal die Betriebsaufgabe komplexer flexibler Materialien wie das Falten von Kleidung abgeschlossen. Mit der Enthüllung von Figure01, das das multimodale große Modell von OpenAI integriert, haben die damit verbundenen Fortschritte inländischer Kollegen Aufmerksamkeit erregt. Erst gestern veröffentlichte UBTECH, Chinas „größter Bestand an humanoiden Robotern“, die erste Demo des humanoiden Roboters WalkerS, der tief in das große Modell von Baidu Wenxin integriert ist und einige interessante neue Funktionen aufweist. Jetzt sieht WalkerS, gesegnet mit Baidu Wenxins großen Modellfähigkeiten, so aus. Wie Figure01 bewegt sich WalkerS nicht umher, sondern steht hinter einem Schreibtisch, um eine Reihe von Aufgaben zu erledigen. Es kann menschlichen Befehlen folgen und Kleidung falten

    So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen Mar 24, 2024 pm 06:03 PM

    So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen Mit der Popularität sozialer Software und der zunehmenden Bedeutung von Datenschutz und Sicherheit rückt die WeChat-Klonfunktion allmählich in den Mittelpunkt der Aufmerksamkeit der Menschen. Die WeChat-Klonfunktion kann Benutzern helfen, sich gleichzeitig bei mehreren WeChat-Konten auf demselben Mobiltelefon anzumelden, was die Verwaltung und Nutzung erleichtert. Es ist nicht schwierig, die WeChat-Klonfunktion auf Huawei-Mobiltelefonen zu implementieren. Sie müssen lediglich die folgenden Schritte ausführen. Schritt 1: Stellen Sie sicher, dass die Version Ihres Mobiltelefonsystems und die WeChat-Version den Anforderungen entsprechen. Stellen Sie zunächst sicher, dass die Version Ihres Huawei-Mobiltelefonsystems sowie die WeChat-App auf die neueste Version aktualisiert wurden.

    Deepseek Web Version Eingang Deepseek Offizielle Website Eingang Deepseek Web Version Eingang Deepseek Offizielle Website Eingang Feb 19, 2025 pm 04:54 PM

    Deepseek ist ein leistungsstarkes Intelligent -Such- und Analyse -Tool, das zwei Zugriffsmethoden bietet: Webversion und offizielle Website. Die Webversion ist bequem und effizient und kann ohne Installation verwendet werden. Unabhängig davon, ob Einzelpersonen oder Unternehmensnutzer, können sie massive Daten über Deepseek problemlos erhalten und analysieren, um die Arbeitseffizienz zu verbessern, die Entscheidungsfindung zu unterstützen und Innovationen zu fördern.

    Einführung in den Erhalt von Baidu-Xiyang-Muscheln Einführung in den Erhalt von Baidu-Xiyang-Muscheln Mar 28, 2024 am 09:11 AM

    Es gibt viele Benutzer in Xirang, die nicht wissen, wo die Muscheln sind und wie sie sie bekommen können. Einige Spieler haben mehrere Stunden lang gesucht, können sie aber immer noch nicht finden. Nachfolgend erfahren Sie, wie Sie Baidu-Xirang-Muscheln erhalten . Kommen Sie vorbei. So erhalten Sie Baidu Xirang Shell 1. Zuerst müssen wir zur Community und dann zum Ort im Bild unten kommen. 2. Wählen Sie hier das Ziel aus und betreten Sie die 188. Etage. 3. Nachdem Sie die 188. Etage betreten haben, sehen Sie diese Aufforderung, wenn Sie herumlaufen. Klicken Sie einfach auf „I Got It“. 4. Der Standort der Muschel ist möglicherweise etwas schwierig zu finden. Direkt hinter dem Aufzug 188 befindet sich ein kleiner leuchtender Punkt, bei dem es sich um die Muschel handelt. 5. Sie müssen einen VR-Controller verwenden, um Muscheln aufzunehmen. Klicken Sie einfach auf die Muschel. Einlösungsmethode 1. Klicken Sie zunächst auf das Symbol „Einstellungen“ in der oberen rechten Ecke der Seite und wählen Sie „

    Baidu Apollo bringt Apollo ADFM auf den Markt, das weltweit erste große Modell, das autonomes Fahren der Stufe L4 unterstützt Baidu Apollo bringt Apollo ADFM auf den Markt, das weltweit erste große Modell, das autonomes Fahren der Stufe L4 unterstützt Jun 04, 2024 pm 08:01 PM

    Am 15. Mai veranstaltete Baidu Apollo den Apollo Day 2024 im Wuhan Baidu Carrot Auto Robot Zhixing Valley und demonstrierte umfassend Baidus große Fortschritte beim autonomen Fahren in den letzten zehn Jahren, die auf großen Modellen basierende Technologiesprünge und eine neue Definition der Passagiersicherheit mit sich brachten Baidu, das weltweit größte autonome Fahrzeugbetriebsnetzwerk, hat autonomes Fahren sicherer gemacht als menschliches Fahren. Dadurch werden sicherere, komfortablere, umweltfreundlichere und kohlenstoffärmere Reisemethoden vom Ideal zur Realität. Wang Yunpeng, Vizepräsident der Baidu Group und Präsident der Intelligent Driving Business Group, sagte vor Ort: „Unsere ursprüngliche Absicht, autonome Fahrzeuge zu bauen, besteht darin, den wachsenden Wunsch der Menschen nach besserem Reisen zu befriedigen. Die Zufriedenheit der Menschen ist unsere treibende Kraft. Denn Sicherheit, So schön, wir freuen uns, es zu sehen

    Die Baidu Tieba-App meldet, dass der Vorgang zu häufig erfolgt. Was ist los? Die Baidu Tieba-App meldet, dass der Vorgang zu häufig erfolgt. Was ist los? Apr 01, 2024 pm 05:06 PM

    Die Baidu Tieba-App weist darauf hin, dass der Vorgang zu häufig erfolgt, um den normalen Betrieb und die Benutzererfahrung der Plattform aufrechtzuerhalten, um böswilligen Bildschirm-Spam, Werbe-Spam und andere unangemessene Verhaltensweisen zu verhindern vom Herausgeber. Die Baidu Tieba-App meldet, dass der Vorgang zu häufig erfolgt. 1. Wenn das System die Meldung „Vorgang ist zu häufig“ anzeigt, müssen wir eine Weile warten. Wenn Sie Bedenken haben, können Sie zuerst etwas anderes tun. Im Allgemeinen wird diese Eingabeaufforderung nach einer Weile des Wartens automatisch ausgeblendet und wir können sie normal verwenden. 2. Wenn nach längerem Warten immer noch [Operation Too Frequent] angezeigt wird, können wir versuchen, zur Tieba Emergency Bar, Tieba Feedback Bar und anderen offiziellen Tieba zu gehen, dieses Phänomen zu melden und offizielles Personal zu bitten, es zu beheben. 3.

    So durchsuchen Sie die Ressourcen anderer Personen auf Alibaba Cloud Disk So durchsuchen Sie die Ressourcen anderer Personen auf Alibaba Cloud Disk Mar 30, 2024 am 10:31 AM

    Alibaba Cloud Disk, dieses beliebte Speichertool, hilft uns nicht nur bei der effizienten Verwaltung persönlicher Ressourcen, sondern bietet auch viele praktische Funktionen. Daher können viele Benutzer bei der Suche möglicherweise keine Cloud-Festplattenressourcen finden und möchten daher alle Ressourcen auf der gesamten Festplatte durchsuchen. Nachfolgend wird der Herausgeber dieser Website diese Frage ausführlich beantworten und die spezifische Suchmethode mitteilen Wenn Sie es wissen möchten, kommen Sie bitte vorbei und folgen Sie diesem Artikel, um mehr zu erfahren! So durchsuchen Sie die Ressourcen anderer Personen in Alibaba Cloud Disk 1. Suchen Sie zunächst den spezifischen Pfad der Ressourcendatei im Ordnerverzeichnis von Alibaba Cloud Disk, um den entsprechenden Ordner zu finden. 2. Nutzen Sie anschließend die Dateisuchfunktion und geben Sie die gesuchten Schlüsselwörter ein, um den relevanten Dateiinhalt zu finden. 3. Dann teilen wir den Link mit anderen, um ihn direkt zu finden und herunterzuladen

    Baidu Robin Li leitete ein Team, das PetroChina besuchte, um die Erkenntnisse der Öl- und Gasindustrie zu besprechen Baidu Robin Li leitete ein Team, das PetroChina besuchte, um die Erkenntnisse der Öl- und Gasindustrie zu besprechen May 07, 2024 pm 06:13 PM

    Laut Nachrichten dieser Website vom 7. Mai besuchte Robin Li, Gründer, Vorsitzender und CEO von Baidu, am 6. Mai mit einem Team die China National Petroleum Corporation (im Folgenden als „PetroChina“ bezeichnet) in Peking und traf sich mit Direktoren von Dai Houliang, Vorsitzender der China National Petroleum Corporation und Parteisekretär, führte Gespräche. Die beiden Parteien führten einen intensiven Austausch über die Stärkung der Zusammenarbeit und die Förderung der tiefen Integration der Energiewirtschaft mit digitaler Intelligenz. PetroChina wird den Aufbau einer digitalen China Petroleum Corporation beschleunigen, die Zusammenarbeit mit der Baidu Group stärken, die tiefgreifende Integration der Energiewirtschaft mit digitaler Intelligenz fördern und einen größeren Beitrag zur Gewährleistung der nationalen Energiesicherheit leisten. Robin Li sagte, dass die „intelligente Emergenz“ und die Kernfähigkeiten des Verstehens, der Generierung, der Logik und des Gedächtnisses, die große Modelle zeigen, einen größeren Raum für die Vorstellungskraft für die Kombination von Spitzentechnologie und Öl- und Gasgeschäft eröffnet hätten. Stets

    See all articles