Maison >interface Web >js tutoriel >Comment implémenter la fonction de recherche frontale simple de jQuery

Comment implémenter la fonction de recherche frontale simple de jQuery

小云云original: 2018-05-16 10:48:142574parcourir

Cet article présente principalement la fonction de recherche frontale simple implémentée par jQuery, impliquant la réponse aux événements jQuery et la traversée des éléments de page, la correspondance, les paramètres dynamiques et d'autres compétences opérationnelles connexes. J'espère que les amis qui en ont besoin pourront s'y référer. aider tout le monde.

Code html :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>工程轻量化与可靠性技术实验室</title>
</head>
<body>
<p 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>
  </p>
</body>

Code jQuery :

<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.

Où $(':contains(text)') obtient l'élément contenant le caractère spécifié. La chaîne 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.

Cependant, il y a des problèmes de compatibilité, il n'est pas compatible avec IE et le contenu ne peut pas être écrit dans la liste lors de l'obtention de l'élément parent().

Recommandations associées :

Implémentation JQuery de la fonction de recherche de texte en HTML

Liste des villes de navigation JS et implémentation de la fonction de recherche d'entrée

jQuery implémente la fonction de recherche et affiche le contenu lié à la recherche

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!

jquery html 字符串 JS 事件 ul

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：Méthodes statiques de la classe Class dans ES6Article suivant：Méthodes statiques de la classe Class dans ES6

Articles Liés

Voir plus