个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用以下功能在 articles.html 中进行搜索 - 我的搜索栏位于主页 (index.html) 中。
<div id="tfheader">
<form id="tfnewsearch" method="get" action="articles.html">
<input type="text" class="tftextinput" id="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<script>
var a = document.getElementById('tfnewsearch');
a.addEventListener('submit',function(e) {
e.preventDefault();
var b = document.getElementById('tftextinput').value;
window.location.href = 'articles.html'+b;
});
</script>
我的要求是当我在搜索栏中输入一些字符并按回车键时。它会将我重定向到 article.html 并搜索 article.html 的全部内容
感谢帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gomac Knowledgebase</title>
<!-- LOADING STYLESHEETS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid featured-area-white-border">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="login-box border-right-1">
<a href="#"><i class="fa fa-key"></i> Login</a>
</div>
<div class="login-box border-left-1 border-right-1">
<a href="#"><i class="fa fa-pencil"></i> Sign Up</a>
</div>
</div>
</div>
</div>
</div>
<!-- LOGO -->
<div class="container">
<div class="row">
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
</div>
</div>
</div>
<!-- END LOGO-->
<!-- TOP NAVIGATION -->
<div class="container-fluid">
<div class="navigation">
<div class="row">
<ul class="topnav">
<li></li>
<li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
<li><a href="knowledge-base.html"><i class="fa fa-book"></i> Knowledge Base</a></li>
<li><a href="articles.html"><i class="fa fa-file-text-o"></i> Articles</a></li>
<li><a href="faq.html"><i class="fa fa-lightbulb-o"></i> FAQ</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END TOP NAVIGATION -->
<!-- SEARCH FIELD AREA -->
<div class="searchfield bg-hed-six">
<div class="container" style="padding-top: 20px; padding-bottom: 20px;">
<div class="row text-center margin-bottom-20">
<h1 class="white"> Knowledge Base</h1>
<span class="nested"> Learn to use gomac </span>
</div>
<br>
<div class="row search-row">
<input type="text" class="search" placeholder="What do you need help with?">
<button class="buttonsearch btn btn-info btn-lg">Search</button>
</div>
</div>
</div>
<!-- END SEARCH FIELD AREA -->
<!-- MAIN SECTION -->
<div class="container featured-area-default padding-30">
<div class="row">
<!-- ARTICLE OVERVIEW SECTION -->
<div class="col-md-8 padding-20">
<div class="row">
<!-- BREADCRUMBS -->
<div class="breadcrumb-container">
<ol class="breadcrumb">
<li><a href="index.html"><i class="fa fa-home"></i></a></li>
<li class="active">All Articles</li>
</ol>
</div>
<!-- END BREADCRUMBS -->
<!-- ARTICLES -->
<div class="fb-heading">
All Articles
</div>
<hr class="style-three">
<div class="panel panel-default">
<div class="article-heading-abb">
<a href="single-article.html"><i class="fa fa-pencil-square-o"></i> How to change account password?</a>
</div>
<div class="article-info">
<div class="art-date"><a href="#"><i class="fa fa-calendar-o"></i> 20 May, 2016 </a></div>
<div class="art-category"><a href="#"><i class="fa fa-folder"></i> Account Settings </a></div>
<div class="art-comments"><a href="#"><i class="fa fa-comments-o"></i> 4 Comments </a></div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
<a href="single-article.html" class="btn btn-default btn-wide">Read more...</a>
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<a href="single-article.html"><i class="fa fa-pencil-square-o"></i> How to change currency in gomac?</a>
</div>
<div class="article-info">
<div class="art-date"><a href="#"><i class="fa fa-calendar-o"></i> 20 May, 2016 </a></div>
<div class="art-category"><a href="#"><i class="fa fa-folder"></i> Admin Panel </a></div>
<div class="art-comments"><a href="#"><i class="fa fa-comments-o"></i> 10 Comments </a></div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
<a href="single-article.html" class="btn btn-default btn-wide">Read more...</a>
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<a href="single-article.html"><i class="fa fa-pencil-square-o"></i> How to edit order details?</a>
</div>
<div class="article-info">
<div class="art-date"><a href="#"><i class="fa fa-calendar-o"></i> 20 May, 2016 </a></div>
<div class="art-category"><a href="#"><i class="fa fa-folder"></i> Orders </a></div>
<div class="art-comments"><a href="#"><i class="fa fa-comments-o"></i> 0 Comments </a></div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
<a href="single-article.html" class="btn btn-default btn-wide">Read more...</a>
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<a href="single-article.html"><i class="fa fa-pencil-square-o"></i> How to print stock barcode?</a>
</div>
<div class="article-info">
<div class="art-date"><a href="#"><i class="fa fa-calendar-o"></i> 20 May, 2016 </a></div>
<div class="art-category"><a href="#"><i class="fa fa-folder"></i> Stocks </a></div>
<div class="art-comments"><a href="#"><i class="fa fa-comments-o"></i> 12 Comments </a></div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
<a href="single-article.html" class="btn btn-default btn-wide">Read more...</a>
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<a href="single-article.html"><i class="fa fa-pencil-square-o"></i> How to generate barcode?</a>
</div>
<div class="article-info">
<div class="art-date"><a href="#"><i class="fa fa-calendar-o"></i> 20 May, 2016 </a></div>
<div class="art-category"><a href="#"><i class="fa fa-folder"></i> Stocks </a></div>
<div class="art-comments"><a href="#"><i class="fa fa-comments-o"></i> 7 Comments </a></div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
<a href="single-article.html" class="btn btn-default btn-wide">Read more...</a>
</div>
</div>
<!-- END ARTICLES -->
<!-- PAGINATION -->
<nav class="text-center">
<ul class="pagination">
<li class="disabled">
<a href="#" aria-label="Previous"><span aria-hidden="true"><i class="fa fa-arrow-circle-left"></i> Previous</span></a>
</li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li class="enabled"><a href="#">2 <span class="sr-only">(current)</span></a></li>
<li class="enabled"><a href="#">3 <span class="sr-only">(current)</span></a></li>
<li class="enabled">
<a href="#" aria-label="Previous"><span aria-hidden="true">Next <i class="fa fa-arrow-circle-right"></i></span></a>
</li>
</ul>
</nav>
<!-- END PAGINATION -->
</div>
</div>
<!-- END ARTICLES OVERVIEW SECTION-->
<!-- SIDEBAR STUFF -->
<div class="col-md-4 padding-20">
<div class="row margin-bottom-30">
<div class="col-md-12 ">
<div class="support-container">
<h2 class="support-heading">Need more Support?</h2> If you cannot find an answer in the knowledgebase, you can <a href="#">contact us</a> for further help.
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-md-12">
<div class="fb-heading-small">
Popular Articles
</div>
<hr class="style-three">
<div class="fat-content-small padding-left-10">
<ul>
<li> <a href="#"><i class="fa fa-file-text-o"></i> How to change account password?</a> </li>
<li> <a href="#"><i class="fa fa-file-text-o"></i> How to edit order details?</a> </li>
<li> <a href="#"><i class="fa fa-file-text-o"></i> Add new user</a> </li>
<li> <a href="#"><i class="fa fa-file-text-o"></i> Change customer details</a> </li>
<li> <a href="#"><i class="fa fa-file-text-o"></i> Lookup existing customer in order form</a> </li>
</ul>
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-md-12">
<div class="fb-heading-small">
Latest Articles
</div>
<hr class="style-three">
<div class="fat-content-small padding-left-10">
<ul>
<li> <a href="#"><i class="fa fa-file-text-o"></i> How to change username?</a> </li>
<li> <a href="#"><i class="fa fa-file-text-o"></i> How to change currency in gomac?</a> </li>
<li> <a href="#"><i class="fa fa-file-text-o"></i> How to edit order details?</a> </li>
<li> <a href="#"><i class="fa fa-file-text-o"></i> How to print stock barcode?</a> </li>
<li> <a href="#"><i class="fa fa-file-text-o"></i> How to generate barcode?</a> </li>
</ul>
</div>
</div>
</div>
<!-- POPULAR TAGS (SHOW MAX 20 TAGS) -->
<div class="row margin-top-20">
<div class="col-md-12">
<div class="fb-heading-small">
Popular Tags
</div>
<hr class="style-three">
<div class="fat-content-tags padding-left-10">
<a href="#" class="btn btn-default btn-o btn-sm">password</a>
<a href="#" class="btn btn-default btn-o btn-sm">settings</a>
<a href="#" class="btn btn-default btn-o btn-sm">sign up</a>
<a href="#" class="btn btn-default btn-o btn-sm">currency</a>
<a href="#" class="btn btn-default btn-o btn-sm">payment</a>
<a href="#" class="btn btn-default btn-o btn-sm">user</a>
<a href="#" class="btn btn-default btn-o btn-sm">database</a>
<a href="#" class="btn btn-default btn-o btn-sm">storage</a>
<a href="#" class="btn btn-default btn-o btn-sm">export</a>
<a href="#" class="btn btn-default btn-o btn-sm">email</a>
<a href="#" class="btn btn-default btn-o btn-sm">import</a>
<a href="#" class="btn btn-default btn-o btn-sm">campaign</a>
<a href="#" class="btn btn-default btn-o btn-sm">edit</a>
<a href="#" class="btn btn-default btn-o btn-sm">orders</a>
<a href="#" class="btn btn-default btn-o btn-sm">help</a>
<a href="#" class="btn btn-default btn-o btn-sm">billing</a>
<a href="#" class="btn btn-default btn-o btn-sm">user</a>
<a href="#" class="btn btn-default btn-o btn-sm">configure</a>
<a href="#" class="btn btn-default btn-o btn-sm">customer</a>
</div>
</div>
</div>
<!-- END POPULAR TAGS (SHOW MAX 20 TAGS) -->
</div>
<!-- END SIDEBAR STUFF -->
</div>
</div>
<!-- END MAIN SECTION -->
<!-- FOOTER -->
<div class="container-fluid footer marg30">
<div class="container">
<!-- FOOTER COLUMN ONE -->
<div class="col-xs-12 col-sm-4 col-md-4 margin-top-20">
<div class="panel-transparent">
<div class="footer-heading">How it works</div>
<div class="footer-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
<!-- END FOOTER COLUMN ONE -->
<!-- FOOTER COLUMN TWO -->
<div class="col-xs-12 col-sm-4 col-md-4 margin-top-20">
<div class="panel-transparent">
<div class="footer-heading">Categories</div>
<div class="footer-body">
<ul>
<li> <a href="single-category.html">General</a> </li>
<li> <a href="single-category.html">Getting Started</a> </li>
<li> <a href="single-category.html">Account Support</a> </li>
<li> <a href="single-category.html">Guides</a> </li>
<li> <a href="single-category.html">Payment & Billing</a> </li>
<li> <a href="single-category.html">Misc</a> </li>
</ul>
</div>
</div>
</div>
<!-- END FOOTER COLUMN TWO -->
<!-- FOOTER COLUMN THREE -->
<div class="col-xs-12 col-sm-4 col-md-4 margin-top-20">
<div class="panel-transparent">
<div class="footer-heading">Popular Articles</div>
<div class="footer-body">
<ul>
<li> <a href="single-article.html">How to change account password</a> </li>
<li> <a href="single-article.html">How to edit order details</a> </li>
<li> <a href="single-article.html">Add new user</a> </li>
<li> <a href="single-article.html">Change customer details</a> </li>
<li> <a href="single-article.html">Lookup existing customer in order form</a> </li>
<li> <a href="single-article.html">How do I reset my password</a> </li>
</ul>
</div>
</div>
</div>
<!-- END FOOTER COLUMN THREE -->
</div>
</div>
<!-- END FOOTER -->
<!-- COPYRIGHT INFO -->
<div class="container-fluid footer-copyright marg30">
<div class="container">
<div class="pull-left">
Copyright © 2016 Sunny Gohil</a>
</div>
<div class="pull-right">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</div>
<!-- END COPYRIGHT INFO -->
<!-- LOADING MAIN JAVASCRIPT -->
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/main.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src='https://cdn.rawgit.com/VPenkov/okayNav/master/app/js/jquery.okayNav.js'></script>
</body>
</html>上面是articles.html的html
最佳答案
首先 - 从 url 解析字符串，然后在文档中搜索它。
var a = document.getElementById('tfnewsearch');
if(a){
a.addEventListener('submit',function(e) {
e.preventDefault();
var b = document.getElementById('tftextinput').value;
window.location.href = 'articles.html?'+b;
});
}
// var queryString = url.substring( url.indexOf('?') + 1 );
var queryString = window.location.search;
queryString = queryString.substring(1);
function myFunction() {
// Declare variables
var para, filter, ul, li, anchor;
para = document.getElementById('block-with-text');
filter = queryString.toUpperCase();
anchor = document.getElementById("anchor");
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
p = li[i].getElementsByTagName("p")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else if (p.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
myFunction();
关于javascript - 如何进行搜索以搜索静态网站中的 html 文件，而不管任何页面搜索栏位于，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47712516/
26
4
0
我正在使用 javascript 并有以下类: const Product = require('../models').Product class ProductService { cons
我正在开发一个简单的应用程序，宠物用户可以在其中创建关于他们宠物的板并在板上显示图片。 我正在尝试创建一个功能，用户可以点击他们的图板，将他们重定向到他们的图板，该图板将显示他们所有的宠物图片。 当我
我有这样的事情:循环遍历 ids，并对每个 ids 向服务器(同一域)发出 ajax 请求 (async:true) 并将接收到的数据附加到 DOM 元素。这不是一项艰巨的任务，它确实有效。示例代码:
我正在尝试使用 Pillow 在我的网络应用程序中添加用户可上传的图像。我创建了一个 Django Upload 模型并将其注册到 Admin 中。当我使用管理控制台添加照片后，我收到以下错误。最初该
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
说到 UINavigationBar 时我有点困惑。我以编程方式设置它，它的作用是将我的 viewController 向下推(因此在启动应用程序后看不到 Storyboard中看到的 View 底部
我有以下查询，它可以满足我的要求，并显示从出生日期转换而来的人们的年龄。但我现在想通过说大于或小于这些年龄来缩小结果范围，但我不知道该怎么做。 SELECT u.`id` as `user_id`
我有一个 ListView (不是 recyclerView)，其中每一行都有一个按钮、几个 TextView 和一个 EditText。单击特定按钮(“editTremp”)后，我希望 EditTe
我的 cellAtIndexPath 中有一个查询。正如常见的那样，此查询从单元格行索引处的数组中获取对象。我想知道每次加载 tableView 时是否只有一个查询，还是将其算作每个 indexPat
我目前正在探索 http://www.ecovivo.be/rubriek/food 上使用的模板中的错误. 问题:访问该链接时，您会注意到右侧有一个带有内容的大型 float 图像。现在一切正常。但
我在 ViewController 之间通过引用传递特定模型的数组。 如果我更改数组中特定元素的任何值，它会在所有 ViewController 中很好地反射(reflect)，但是当我从该数组中删除
svg 包含更多元素，其中之一是下拉选择器。我遇到的问题是选择器只能在其顶部边缘被点击，而不能在选择器的其他任何地方被点击。 选择器称为 yp-date-range-selector。在下一张图片中，
我的元素使用 20 行 20 列的 css 网格布局(每个单元格占屏幕的 5%)。其中一个页面有一个按钮。最初该页面包含在网格第 5-8 列和网格第 6-9 行中，按钮本身没有问题，但我需要将其居中放
我想使用 CSS Trick 使图像居中.但是如果图像大小是随机的(不固定的)怎么办。令人惊讶的是，我不想保持图像响应，我想在不改变其宽度或高度(实际像素)的情况下将图像置于中心。 下面是我的代码:
我正在尝试在网址之间进行路由。产品是一个类: from django.db import models from django.urls import reverse # Create your mo
我正在通过查看 Django 教程来制作网站。我收到一个错误: NoReverseMatch at /polls/ Reverse for 'index' with no arguments not
我一直在试用 Django 教程 Django Tutorial Page 3并遇到了这个错误 "TemplateDoesNotExist at /polls/ " . 我假设问题出在我的代码指向模板
我有一个应用程序，其中大部分图像资源都存储在单独的资源包中(这样做是有正当理由的)。这个资源包与主应用程序包一起添加到项目中，当我在 Interface Builder 中设计我的 NIB 时，所有这
我使用 Xcode 6.3.2 开发了一个 iPad 应用程序。我将我的应用程序提交到 App Store 进行审核，但由于崩溃而被拒绝。以下是来自 iTunes 的崩溃报告。 Incident Id
我正在使用以下内容来显示水平滚动条: CSS: div { width: 300px; overflow-x: scroll; } div::-webkit-scrollbar {
我是一名优秀的程序员,十分优秀！