recherche

Maison >interface Web >js tutoriel >Utilisez jQuery pour implémenter la recherche frontale

Utilisez jQuery pour implémenter la recherche frontale

php中世界最好的语言
php中世界最好的语言original
2018-04-19 14:14:291597parcourir

Cette fois, je vais vous apporter les précautions pour utiliser jQuery pour implémenter la recherche sur le front-end et pour utiliser jQuery pour implémenter la recherche sur le front-end. Voici des cas pratiques, jetons un coup d'œil.

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('a:contains('+ searchText +')').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.

Parmi eux, $(':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 ce procédé, 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().

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

Lecture recommandée :

jquery lit les données json et les utilise en html

Comment configurer le webpack avec jquery

Comment jQuery EasyUI exploite les onglets du panneau d'onglets

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：jQuery implémente l'affichage des icônes et masque la commutationArticle suivant：jQuery implémente l'affichage des icônes et masque la commutation

Articles Liés

Voir plus