suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die einfache Front-End-Suchfunktion von jQuery

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

小云云
小云云Original
2018-05-16 10:48:142538Durchsuche

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>

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>

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!

jquery html 字符串 JS 事件 ul
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Statische Methoden der Klassenklasse in ES6Nächster Artikel：Statische Methoden der Klassenklasse in ES6

In Verbindung stehende Artikel

Mehr sehen