Maison > Article > interface Web > Comment jQuery implémente la fonction de recherche frontale

Comment jQuery implémente la fonction de recherche frontale

php中世界最好的语言original: 2017-12-31 11:05:391728parcourir

Ce que je vous apporte cette fois, c'est comment implémenter la fonction de recherche frontale avec jQuery La fonction de recherche frontale nécessite la combinaison de HTML et de jQuery. analyse.

code html :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>工程轻量化与可靠性技术实验室</title>
</head>
<body>
<div class="content-right">
   <input type="text"><input type="submit" value="搜索">
   <h3>应用流体学</h3>
   <ul id="content_news_list">
    <li><span>2015-7-8</span><a href="">这里是文章的标题1</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题2</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题3</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题4</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题5</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题6</a></li>
    <li><span>2015-7-8</span><a href="">这里是文章的标题4</a></li>
   </ul>
  </div>
</body>

jQuerycode :

<script type="text/javascript">
  $(function(){
   $("input[type=text]").change(function () {
    var searchText = $(this).val();//获取输入的搜索内容
    var $searchLi = "";//预备对象，用于存储匹配出的li
    if (searchText != "") {
     //获取所有匹配的li
     $searchLi = $("#content_news_list").find(&#39;a:contains(&#39;+ searchText +&#39;)&#39;).parent();
     //将内容清空
     $("#content_news_list").html("");
    }
    //将获取的元素追加到列表中
    $("#content_news_list").html($searchLi).clone();
    //判断搜索内容是否有效，若无效，输出not find
    if ($searchLi.length <= 0) {
     $("#content_news_list").html("<li>not find</li>")
    }
   })
   $("input[type=submit]").click(function () {
    $("searchText").change();
   })
  })
</script>

Récupérez les éléments de la liste par mot-clé et ajoutez-les à ul in.

where $(':contains(text)') obtient l'élément contenant le caractère spécifié. La string peut être du texte directement contenu dans l'élément, ou contenu dans un élément enfant.

Dans cette méthode, une fonction de récupération simple est implémentée en déterminant si l'élément obtenu contient les caractères recherchés.

Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser les instructions personnalisées de Vue pour compléter un menu déroulant

À propos de HTTP/2 push du serveur

Comment cliquer pour accéder à la boîte aux lettres personnelle connectée avec JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelles sont les fonctions des méthodes statiques des classes dans ES6Article suivant：Quelles sont les fonctions des méthodes statiques des classes dans ES6

Articles Liés

Voir plus