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

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

Jun 07, 2016 pm 05:25 PM
Eingabeaufforderungsbox 百度搜索

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');

    你在本地服务器测试下 一定很给力 而且原理很简单 没那么麻烦
    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ß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)

    So legen Sie die Standard-Baidu-Suchmaschine des QQ-Browsers fest So legen Sie die Standard-Baidu-Suchmaschine des QQ-Browsers fest Apr 11, 2024 pm 02:22 PM

    Wie lege ich QQ Browser als Standard-Baidu-Suchmaschine fest? QQ Browser ist ein Webbrowser-Tool, das sich sehr gut für Büro oder Studium eignet. Die Standardsuchmaschine ist jedoch an die Verwendung von Baidu gewöhnt Bei der Suche auf Baidu wissen viele Freunde immer noch nicht genau, wie sie vorgehen sollen. Als nächstes bringt Ihnen der Editor eine Anleitung zum Festlegen von Baidu als Standardsuchmaschine für den QQ-Browser. Interessierte Freunde dürfen es sich nicht entgehen lassen. Tipps zum Festlegen von Baidu als Standardsuchmaschine in QQ Browser 1. Aktivieren Sie QQ Browser und klicken Sie auf das Symbol [drei], das in der oberen rechten Ecke erscheint (wie im Bild gezeigt). 2. Nun erscheint unten ein Funktionsfenster. Klicken Sie in diesem Fenster, um die Option [Einstellungen] aufzurufen.

    So fügen Sie die Baidu-Suchmaschine zu Google Chrome hinzu So fügen Sie die Baidu-Suchmaschine zu Google Chrome hinzu Mar 02, 2024 pm 01:31 PM

    Wie füge ich die Baidu-Suchmaschine zu Google Chrome hinzu? Unter normalen Umständen installieren wir Google Chrome und öffnen die Hauptseite der offiziellen Google-Suchmaschine. Die Google-Suche kann jedoch in China nicht verwendet werden, daher müssen wir die Suchmaschine ändern Ein weiterer Ja, viele Benutzer verwenden gerne die Baidu-Suche. So stellen Sie die Google-Hauptseite auf die Baidu-Suche ein. Der unten stehende Editor stellt Ihnen ein Tutorial zum Hinzufügen der Baidu-Suchmaschine zu Google Chrome vor und hofft, Ihnen dabei zu helfen. Anleitung zum Hinzufügen der Baidu-Suchmaschine zu Google Chrome 1. Öffnen Sie Google Chrome und geben Sie die Einstellungen in der oberen rechten Ecke ein, wie in der Abbildung unten gezeigt. 2. Klicken Sie links auf die Schaltfläche „Einstellungen“ und wählen Sie dann „Suchmaschine“ aus, wie in der Abbildung unten gezeigt. 3. Suchen Sie in der Suchmaschine

    So stellen Sie Google Chrome so ein, dass Baidu geöffnet wird So stellen Sie Google Chrome so ein, dass Baidu geöffnet wird Mar 14, 2024 pm 07:30 PM

    Wie stelle ich Google Chrome so ein, dass Baidu geöffnet wird? Unter normalen Umständen wird nach dem Herunterladen und Installieren von Google Chrome standardmäßig die Google-Suche geöffnet. Obwohl die Google-Suche sehr leistungsfähig ist, kann sie in China nicht verwendet werden. Daher stellen viele Freunde die Suchmaschine des Browsers gerne ein zu Baidu Search, also wie man es konkret ändert. Der unten stehende Herausgeber gibt Ihnen eine detaillierte Einführung in die spezifische Methode zum Einrichten von Google Chrome zum Öffnen von Baidu. Interessierte Freunde können vorbeischauen, um es herauszufinden. Die spezifische Methode zum Öffnen der Google Chrome-Einstellungen ist Baidu. Öffnen Sie zunächst Google Chrome auf Ihrem Computer und suchen Sie dann das Symbol mit den drei Punkten in der oberen rechten Ecke. Klicken Sie anschließend auf dieses Symbol und wählen Sie die Option Einstellungen. Bei einigen Benutzerversionen kann es erforderlich sein, auf die Schaltfläche „Optionen“ zu klicken

    Wie wird aus dem Öffnen von Google Chrome Baidu? Wie wird aus dem Öffnen von Google Chrome Baidu? Mar 27, 2024 pm 03:50 PM

    Warum wird Baidu angezeigt, wenn ich Google Chrome öffne? Die Standard-Homepage-Suchoberfläche von Google Chrome, die wir heruntergeladen und installiert haben, ist die Google-Suche. Die Startseite dieses Browsers wurde jedoch auch von anderen Browsern manipuliert. Viele Benutzer sagten, dass beim Öffnen der Google Chrome-Homepage Baidu Search Wie können wir in dieser Situation die Standardsuche von Google Chrome auf die Standardsuche ändern? Lassen Sie sich jetzt vom Editor die Lösung zum Öffnen von Baidu-Seiten in Google Chrome vorstellen. Freunde in Not dürfen sie sich nicht entgehen lassen. Das Öffnen von Google Chrome ist die Baidu-Seitenlösung 1: 1. Klicken Sie auf die drei Punkte in der oberen rechten Ecke von Google Chrome, geben Sie dann die Einstellungen ein und ändern Sie, welche URL beim Start geöffnet wird. Beispielsweise können Bing oder andere URLs verwendet werden (wie im Bild gezeigt). 2. Das können Sie auch

    So legen Sie Baidu als Startseite in Google Chrome fest So legen Sie Baidu als Startseite in Google Chrome fest Mar 19, 2024 pm 07:50 PM

    Wie lege ich Baidu als Startseite von Google Chrome fest? Heutzutage verwenden viele Menschen gerne Google Chrome. Nach dem Herunterladen und Installieren dieses Browsers ist die Google-Suche in der Regel nicht verfügbar. Daher müssen wir die Startseitensuchmaschine von Google Chrome auf eine andere umstellen Ja, viele Freunde mögen die Baidu-Suche. So stellen Sie die Startseite von Google Chrome auf Baidu ein. Dieser Artikel enthält eine grafische Anleitung zum Festlegen von Baidu als Startseite von Google Chrome. Ich hoffe, dass es Ihnen hilfreich sein kann. Grafisches Tutorial zum Festlegen von Baidu als Startseite von Google Chrome 1. Klicken Sie, um Google Chrome zu öffnen. Sie können sehen, dass die aktuelle Standardeinstellung die Google-Suche ist, wie in der Abbildung unten dargestellt. 2. Klicken Sie auf das Symbol mit den drei Punkten in der oberen rechten Ecke der Benutzeroberfläche und wählen Sie dann aus

    PHP-Crawler-Praxis: Baidu-Suchergebnisse crawlen PHP-Crawler-Praxis: Baidu-Suchergebnisse crawlen Jun 13, 2023 pm 12:39 PM

    Mit der Entwicklung des Internets können wir über verschiedene Suchmaschinen problemlos verschiedene Informationen erhalten. Für Entwickler ist es eine sehr wichtige Fähigkeit, verschiedene Daten von Suchmaschinen zu erhalten. Heute lernen wir, wie man mit PHP einen Crawler zum Crawlen von Baidu-Suchergebnissen schreibt. 1. Funktionsweise des Crawlers Bevor wir beginnen, wollen wir zunächst die Grundprinzipien der Funktionsweise des Crawlers verstehen. Zunächst sendet der Crawler eine Anfrage an den Server, um den Inhalt der Website anzufordern. Nachdem der Server die Anfrage erhalten hat, gibt er den Inhalt der Webseite zurück. Der Crawler erhielt die

    Baidu-Suche: Lan Yiyun [ausführliche Erklärung gängiger cmd-Befehle. 】 Baidu-Suche: Lan Yiyun [ausführliche Erklärung gängiger cmd-Befehle. 】 Mar 27, 2024 pm 02:06 PM

    Im Folgenden finden Sie eine detaillierte Erklärung und Verwendung einiger häufig verwendeter CMD-Befehle: dir: Zeigt eine Liste der Dateien und Unterverzeichnisse im aktuellen Verzeichnis an. Verwendung: dir [Verzeichnispfad] cd: Aktuelles Verzeichnis ändern. Verwendung: cd [Verzeichnispfad] mkdir: Erstellen Sie ein neues Verzeichnis. Verwendung: mkdir [Verzeichnisname] copy: Kopieren einer Datei oder eines Verzeichnisses. Verwendung: kopieren[Quelldateipfad][Zieldateipfad]Verschieben: Dateien oder Verzeichnisse verschieben. Verwendung: move[Quelldateipfad][Zieldateipfad]del: Datei löschen. Verwendung: del[Dateipfad]rmdir: Verzeichnis löschen. Verwendung: rmdir[Verzeichnispfad]ren: Benennen Sie eine Datei oder ein Verzeichnis um. Verwendung: ren[ursprünglicher Name][neuer Name]

    So implementieren Sie mit Vue Baidu-ähnliche Sucheffekte So implementieren Sie mit Vue Baidu-ähnliche Sucheffekte Sep 19, 2023 pm 01:24 PM

    Für die Implementierung von Baidu-ähnlichen Sucheffekten mit Vue sind bestimmte Codebeispiele erforderlich. Die Baidu-Suchmaschine war schon immer eine der am häufigsten von inländischen Benutzern verwendeten Suchmaschinen, und ihre einzigartigen Sucheffekte bieten den Benutzern auch ein gutes Erlebnis. Unter ihnen ist auch der Dropdown-Box-Effekt sehr beliebt, der die Baidu-Suche imitiert. In diesem Artikel wird erläutert, wie Sie mit Vue Baidu-ähnliche Sucheffekte implementieren, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir ein Vue-Projekt erstellen. Stellen Sie in der Eintragsdatei des Projekts (main.js) Vue und verwandte Komponenten vor: impo

    See all articles