Utilisez jQuery pour implémenter la recherche frontale-js tutoriel-php.cn

Utilisez jQuery pour implémenter la recherche frontale

php中世界最好的语言

Libérer： 2018-04-19 14:14:29

original

1536 Les gens l'ont consulté

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>

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('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>

Copier après la connexion

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!