Comment implémenter la fonction de recherche frontale simple de jQuery-js tutoriel-php.cn

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

小云云

Libérer： 2018-05-16 10:48:14

original

2571 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!