suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie jQuery, um die Front-End-Suche zu implementieren

Verwenden Sie jQuery, um die Front-End-Suche zu implementieren

php中世界最好的语言
php中世界最好的语言Original
2018-04-19 14:14:291599Durchsuche

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von jQuery zur Implementierung der Suche im Frontend und die Verwendung von jQuery zur Implementierung der Suche im Frontend vorstellen. Im Folgenden finden Sie praktische Fälle. Werfen wir einen Blick darauf.

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

Rufen Sie Elemente nach Schlüsselwörtern aus der Liste ab und fügen Sie sie zu ul hinzu.

Unter anderem ruft $(':contains(text)') das Element ab, 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 dem IE kompatibel und der Inhalt kann beim Abrufen des Elements parent() nicht in die Liste geschrieben werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

jquery liest JSON-Daten und verwendet sie in HTML

So konfigurieren Sie Webpack mit jquery

Wie jQuery EasyUI Tab-Panel-Registerkarten bedient

Das obige ist der detaillierte Inhalt vonVerwenden Sie jQuery, um die Front-End-Suche zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：jQuery implementiert das Anzeigen und Ausblenden von SymbolenNächster Artikel：jQuery implementiert das Anzeigen und Ausblenden von Symbolen

In Verbindung stehende Artikel

Mehr sehen