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:142471Durchsuche
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('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>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!