So implementieren Sie die einfache Front-End-Suchfunktion von jQuery-js-Tutorial-php.cn

So implementieren Sie die einfache Front-End-Suchfunktion von jQuery

小云云

Freigeben： 2018-05-16 10:48:14

Original

2582 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die von jQuery implementierte einfache Front-End-Suchfunktion vorgestellt, die das Durchlaufen von jQuery-Ereignissen, den Abgleich, dynamische Einstellungen und andere damit verbundene Betriebsfähigkeiten umfasst allen helfen.

HTML-Code:

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

Nach dem Login kopieren

jQuery-Code:

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

Nach dem Login kopieren

Elemente in der Liste nach Schlüsselwörtern abrufen und zu ul hinzufügen.

wobei $(':contains(text)') das Element abruft, das das angegebene Zeichen enthält. Die Zeichenfolge kann Text sein, der direkt im Element oder in einem untergeordneten Element enthalten ist.

Bei dieser Methode wird eine einfache Abruffunktion implementiert, indem ermittelt wird, ob das erhaltene Element die gesuchten Zeichen enthält.

Es gibt jedoch Kompatibilitätsprobleme, es ist nicht mit IE kompatibel und der Inhalt kann beim Abrufen des Elements parent() nicht in die Liste geschrieben werden.

Verwandte Empfehlungen:

JQuery-Implementierung der Textsuchfunktion in HTML

JS-Implementierung einer Städteliste mit Navigation und Eingabesuchfunktion

jQuery implementiert die Suchfunktion und zeigt suchbezogene Inhalte an

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die einfache Front-End-Suchfunktion von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!