Wie jQuery die Front-End-Suchfunktion implementiert-js-Tutorial-php.cn

Wie jQuery die Front-End-Suchfunktion implementiert

php中世界最好的语言

Freigeben： 2017-12-31 11:05:39

Original

1707 Leute haben es durchsucht

Was ich Ihnen dieses Mal zeige, ist, wie Sie die Front-End-Suchfunktion mit jQuery implementieren. Dieser Artikel wird Ihnen eine gute Anleitung geben Analyse.

HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>工程轻量化与可靠性技术实验室</title>
</head>
<body>
<div 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>
  </div>
</body>

Nach dem Login kopieren

jQueryCode:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie die obige Einführung gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie die benutzerdefinierten Anweisungen von Vue, um ein Dropdown-Menü auszufüllen

Über HTTP/2 Server-Push

So klicken Sie, um mit JS zum angemeldeten persönlichen Postfach zu springen

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