AJAX 实时搜索

AJAX 可为用户提供更友好、交互性更强的搜索体验。

AJAX Live Search

在下面的实例中,我们将演示一个实时的搜索,在您键入数据的同时即可得到搜索结果。

实时的搜索与传统的搜索相比,具有很多优势:

1. 当键入数据时,就会显示出匹配的结果

2. 当继续键入数据时,对结果进行过滤

3. 如果结果太少,删除字符就可以获得更宽的范围

在下面的文本框中输入 "HTML",搜索包含 HTML 的页面:


上面实例中的结果在一个 XML 文件(links.xml)中进行查找。为了让这个例子小而简单,我们只提供 6 个结果。

实例解释 - HTML 页面

当用户在上面的输入框中键入字符时,会执行 "showResult()" 函数。该函数由 "onkeyup" 事件触发:

   

源代码解释:

如果输入框是空的(str.length==0),该函数会清空 livesearch 占位符的内容,并退出该函数。

如果输入框不是空的,那么 showResult() 会执行以下步骤:

1. 创建 XMLHttpRequest 对象

2. 创建在服务器响应就绪时执行的函数

3. 向服务器上的文件发送请求

4. 请注意添加到 URL 末端的参数(q)(包含输入框的内容)

PHP 文件

上面这段通过 JavaScript 调用的服务器页面是名为 "livesearch.php" 的 PHP 文件。

"livesearch.php" 中的源代码会搜索 XML 文件中匹配搜索字符串的标题,并返回结果:

load("links.xml"); $x=$xmlDoc->getElementsByTagName('link'); // 从 URL 中获取参数 q 的值 $q=$_GET["q"]; // 如果 q 参数存在则从 xml 文件中查找数据 if (strlen($q)>0) { $hint=""; for($i=0; $i<($x->length); $i++) { $y=$x->item($i)->getElementsByTagName('title'); $z=$x->item($i)->getElementsByTagName('url'); if ($y->item(0)->nodeType==1) { // 找到匹配搜索的链接 if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) { if ($hint=="") { $hint="" . $y->item(0)->childNodes->item(0)->nodeValue . ""; } else { $hint=$hint . "
" . $y->item(0)->childNodes->item(0)->nodeValue . ""; } } } } } // 如果没找到则返回 "no suggestion" if ($hint=="") { $response="no suggestion"; } else { $response=$hint; } // 输出结果 echo $response; ?>

如果 JavaScript 发送了任何文本(即 strlen($q) > 0),则会发生:

1) 加载 XML 文件到新的 XML DOM 对象

2) 遍历所有的 元素,以便找到匹配 JavaScript 所传文本</p> <p>3) 在 "$response" 变量中设置正确的 URL 和标题。如果找到多于一个匹配,所有的匹配都会添加到变量。</p> <p>4) 如果没有找到匹配,则把 $response 变量设置为 "no suggestion"。</p> <p><br></p> </div> </div> <a class="course-btn course_code_header_next" href="//m.sbmmt.com/fr">Formation continue</a> </div> <div class="layui-col-md6 editor-box"> <div id="code_spread_shrink"> <div id="code_spread_shrink_show" unselectable="on"> <span>||</span> </div> </div> <div class="editor-tab js-editor-tab"> <div class="editor-left icon-left editor-op"></div> <div class="editor-view"> <ul class="clearfix" id="J_TabType" style="width: 120px; margin-left: 0px;"> <li class="ui-tabs-active"><a href="javascript:;">nouveau fichier</a></li> </ul> </div> <div class="editor-right icon-right editor-op"></div> </div> <div id="editor-tabs-html" data-filename="index.html" data-lang="php" style="font-size: 16px;height:600px"> <?php // 需要与前面的HTML文件联合使用 $xmlDoc=new DOMDocument(); $xmlDoc->load("links.xml"); $x=$xmlDoc->getElementsByTagName('link'); // 从 URL 中获取参数 q 的值 $q=$_GET["q"]; // 如果 q 参数存在则从 xml 文件中查找数据 if (strlen($q)>0) { $hint=""; for($i=0; $i<($x->length); $i++) { $y=$x->item($i)->getElementsByTagName('title'); $z=$x->item($i)->getElementsByTagName('url'); if ($y->item(0)->nodeType==1) { // 找到匹配搜索的链接 if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) { if ($hint=="") { $hint="<a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes->item(0)->nodeValue . "</a>"; } else { $hint=$hint . "<br /><a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes->item(0)->nodeValue . "</a>"; } } } } } // 如果没找到则返回 "no suggestion" if ($hint=="") { $response="no suggestion"; } else { $response=$hint; } // 输出结果 echo $response; ?> </div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit" id="J_Commit" title="soumettre">soumettre</a> <a href="javascript:;" class="code-btn-reset " id="J_EditorReset" title="Réinitialiser le code">Réinitialiser le code</a> <div class="aotorun" style="display: block;"> <input type="checkbox" id="aotoruncheck" title="Si cette option est sélectionnée, la modification du code prendra automatiquement effet. Si cette case n'est pas cochée, la soumission doit prendre effet."> <label for="aotoruncheck" title="Si cette option est sélectionnée, la modification du code prendra automatiquement effet. Si cette case n'est pas cochée, la soumission doit prendre effet.">Opération automatique</label> </div> </div> </div> </div> <div class="layui-col-md3" id="viewPort-content"></div> <!-- 右侧章节列表 --> </div> </div> <div class="phpSyyBox"> <div class="phpSyyLeft"> <div class="phpSyySyj"> <span class="right"><a href="//m.sbmmt.com/fr/code/294.html" title="Section précédente"><b class="icon3"></b>Section précédente</a></span> <em></em> <span class="right"><a href="//m.sbmmt.com/fr/code/302.html" title="section suivante"><b class="icon2"></b>section suivante</a></span> </div> <div class="phpSyyQhlx"> <a href="//m.sbmmt.com/fr/course.html" target="_blank" title="Liste des didacticiels"><b></b>Liste des didacticiels</a> </div> <div class="phpSyyHqbz"> <a href="//m.sbmmt.com/fr/wenda.html" target="_blank" title="obtenir de l'aide"><b></b>obtenir de l'aide</a> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="layui-main"> <div class="layui-row"> <div class="layui-col-md9"> <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li class="layui-this">Recommandations de cours</li> <li id="code_down_li">Téléchargement du didacticiel</li> </ul> <div class="layui-tab-content"> <!--推荐课程--> <div class="layui-tab-item layui-show"> <ul class="diy-vodeo diy-li-left php-video-ul"> <li><a href="//m.sbmmt.com/fr/course/1496.html" title=""><img alt="Combat réel Front-end Vue3 [projet vue manuscrit]" src="https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermédiaire</i>Combat réel Front-end Vue3 [projet vue manuscrit]</h3> </div> <div class="php-course-bottom"> <span class="l">2857 Les gens regardent</span> </div></a></li> <li><a href="//m.sbmmt.com/fr/course/1495.html" title=""><img alt="Tutoriel APIPOST [Vulgarisation des concepts techniques liés à la communication réseau]" src="https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Élémentaire</i>Tutoriel APIPOST [Vulgarisation des concepts techniques liés à la communication réseau]</h3> </div> <div class="php-course-bottom"> <span class="l">1795 Les gens regardent</span> </div></a></li> <li><a href="//m.sbmmt.com/fr/course/1494.html" title=""><img alt="Numéro 22_Combat réel complet" src="https://img.php.cn/upload/course/000/000/068/6396fa7cacf3b832.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermédiaire</i>Numéro 22_Combat réel complet</h3> </div> <div class="php-course-bottom"> <span class="l">5521 Les gens regardent</span> </div></a></li> <li><a href="//m.sbmmt.com/fr/course/1493.html" title=""><img alt="Numéro 22_Programmation PHP" src="https://img.php.cn/upload/course/000/000/068/6396fa6f383ca123.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Élémentaire</i>Numéro 22_Programmation PHP</h3> </div> <div class="php-course-bottom"> <span class="l">5172 Les gens regardent</span> </div></a></li> <li><a href="//m.sbmmt.com/fr/course/1492.html" title=""><img alt="Numéro 22_Développement front-end" src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Élémentaire</i>Numéro 22_Développement front-end</h3> </div> <div class="php-course-bottom"> <span class="l">8713 Les gens regardent</span> </div></a></li> <li><a href="//m.sbmmt.com/fr/course/1491.html" title=""><img alt="Tutoriel vidéo Big Data (MySQL) version complète" src="https://img.php.cn/upload/course/000/000/068/639188999c8fd700.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermédiaire</i>Tutoriel vidéo Big Data (MySQL) version complète</h3> </div> <div class="php-course-bottom"> <span class="l">4525 Les gens regardent</span> </div></a></li> <li><a href="//m.sbmmt.com/fr/course/1490.html" title=""><img alt="Allez tutoriel de langue - plein d'informations pratiques et sans bêtises" src="https://img.php.cn/upload/course/000/000/068/638eb9972ff0a840.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Élémentaire</i>Allez tutoriel de langue - plein d'informations pratiques et sans bêtises</h3> </div> <div class="php-course-bottom"> <span class="l">2794 Les gens regardent</span> </div></a></li> <li><a href="//m.sbmmt.com/fr/course/1489.html" title=""><img alt="Cours de programmation de base du langage GO" src="https://img.php.cn/upload/course/000/000/068/63884a6b0880e953.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Élémentaire</i>Cours de programmation de base du langage GO</h3> </div> <div class="php-course-bottom"> <span class="l">2814 Les gens regardent</span> </div></a></li> <li><a href="//m.sbmmt.com/fr/course/1488.html" title=""><img alt="JS avancé et apprentissage BootStrap" src="https://img.php.cn/upload/course/000/000/068/638702e2c8dda719.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermédiaire</i>JS avancé et apprentissage BootStrap</h3> </div> <div class="php-course-bottom"> <span class="l">2563 Les gens regardent</span> </div></a></li> <li><a href="//m.sbmmt.com/fr/course/1487.html" title=""><img alt="Optimisation et dépannage SQL (version MySQL)" src="https://img.php.cn/upload/course/000/000/068/63846a02a06a2889.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermédiaire</i>Optimisation et dépannage SQL (version MySQL)</h3> </div> <div class="php-course-bottom"> <span class="l">3374 Les gens regardent</span> </div></a></li> <li><a href="//m.sbmmt.com/fr/course/1486.html" title=""><img alt="Tutoriel d'entretien avec la base de données Redis+MySQL" src="https://img.php.cn/upload/course/000/000/068/637c751460263927.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Intermédiaire</i>Tutoriel d'entretien avec la base de données Redis+MySQL</h3> </div> <div class="php-course-bottom"> <span class="l">2963 Les gens regardent</span> </div></a></li> <li><a href="//m.sbmmt.com/fr/course/1485.html" title=""><img alt="Livrer de la nourriture ou apprendre la programmation ?" src="https://img.php.cn/upload/course/000/000/067/64be34e8b4aa0653.png" height="124" width="100%"> <div class="php-course-intro"> <h3><i>Élémentaire</i>Livrer de la nourriture ou apprendre la programmation ?</h3> </div> <div class="php-course-bottom"> <span class="l">5708 Les gens regardent</span> </div></a></li> </ul> </div> <div class="layui-tab-item"> <div id="code_down" style="margin: 0 30px 26px;"> <div class="no_data" style="text-align: center;min-height: 490px;line-height:112px;padding: 190px 0;box-sizing: border-box;color: #e3e3e3;font-size: 20px;"> <div style="background: url(/static/images/lesson_video_lists.png) no-repeat;margin-right: 20px;width: 118px;height: 112px;background-position: 0 -389px;float:left;"></div>Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~ </div> </div> </div> </div> </div> </div> <div class="layui-col-md3 video-right-course"> <div class="layui-col-md12 title"> <p>Les étudiants qui ont regardé ce cours apprennent également</p> </div> <div class="layui-col-md12 php-video-img"> <a class="recommend" href="//m.sbmmt.com/fr/course/812.html" target="_blank"><img width="300" height="160" src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)"><span class="font14">491055 joue</span></a> </div> <div class="layui-col-md12 php-video-list"> <ul> <li><a class="font14 color66" title="Parlons brièvement de la création d'une entreprise en PHP" href="//m.sbmmt.com/fr/course/1503.html" target="_blank">Parlons brièvement de la création d'une entreprise en PHP</a></li> <li><a class="font14 color66" title="Introduction rapide au développement web front-end" href="//m.sbmmt.com/fr/course/901.html" target="_blank">Introduction rapide au développement web front-end</a></li> <li><a class="font14 color66" title="Développement pratique à grande échelle par Tianlongbabu du cadre MVC version Mini imitant le site Web de l'encyclopédie des choses embarrassantes" href="//m.sbmmt.com/fr/course/836.html" target="_blank">Développement pratique à grande échelle par Tianlongbabu du cadre MVC version Mini imitant le site Web de l'encyclopédie des choses embarrassantes</a></li> <li><a class="font14 color66" title="Premiers pas avec le développement pratique PHP : création rapide de PHP [Small Business Forum]" href="//m.sbmmt.com/fr/course/902.html" target="_blank">Premiers pas avec le développement pratique PHP : création rapide de PHP [Small Business Forum]</a></li> <li><a class="font14 color66" title="Vérification de connexion et forum de discussion classique" href="//m.sbmmt.com/fr/course/866.html" target="_blank">Vérification de connexion et forum de discussion classique</a></li> <li><a class="font14 color66" title="Collecte de connaissances sur les réseaux informatiques" href="//m.sbmmt.com/fr/course/1463.html" target="_blank">Collecte de connaissances sur les réseaux informatiques</a></li> <li><a class="font14 color66" title="Démarrage rapide de la version complète de Node.JS" href="//m.sbmmt.com/fr/course/1462.html" target="_blank">Démarrage rapide de la version complète de Node.JS</a></li> <li><a class="font14 color66" title="Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original]" href="//m.sbmmt.com/fr/course/1455.html" target="_blank">Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original]</a></li> <li><a class="font14 color66" title="Écrivez votre propre framework PHP MVC (40 chapitres en profondeur/gros détails/à lire absolument pour que les débutants progressent)" href="//m.sbmmt.com/fr/course/1467.html" target="_blank">Écrivez votre propre framework PHP MVC (40 chapitres en profondeur/gros détails/à lire absolument pour que les débutants progressent)</a></li> </ul> </div> </div> </div> </div> <div class="phpcn-modal-layer fixed" style="z-index:9004;visibility:visible;opacity:1;display:none;"> <div class="phpcn-modal-title"> <div class="phpcn-modal-draggable dragging"> <span>Remarques</span> <a href="javascript:void(0)" class="phpcn-icon-close phpcn-modal-close js-modal-close">X</a> </div> </div> <div class="phpcn-modal-inner"> <div class="phpcn-modal-dialog"></div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="//m.sbmmt.com/fr/about/us.html" rel="nofollow" target="_blank" title="À propos de nous" class="cBlack">À propos de nous</a> <a href="//m.sbmmt.com/fr/about/disclaimer.html" rel="nofollow" target="_blank" title="Clause de non-responsabilité" class="cBlack">Clause de non-responsabilité</a> <a href="//m.sbmmt.com/fr/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1"> Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement! </dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> </body> </html>