- html - 我的下拉菜单的内容关闭得太快
- c# - 使用 Html Agility Pack 从网页中的表中获取值而不使用 "SelectNode'
- html - 内容容器下的 CSS 下拉菜单
- html - 如何停止嵌套列表重叠父列表?
我必须创建一个搜索内容,其中包含搜索框、标题和段落描述。默认情况下,描述被禁用,当我输入一些与描述文本匹配的文本时,描述段落标签应该打开。一些匹配的演示是这样的:
[ fiddle ][1]
但默认情况下,p 标签应被禁用,并且仅当搜索文本匹配时才可见。
function highlightSearch() {
var text = document.getElementById("query").value;
var query = new RegExp("(\\b" + text + "\\b)", "gim");
var e = document.getElementById("searchtext").innerHTML;
var enew = e.replace(/(<span>|<\/span>)/igm, "");
document.getElementById("searchtext").innerHTML = enew;
var newe = enew.replace(query, "<span>$1</span>");
document.getElementById("searchtext").innerHTML = newe;
}
#searchtext span{
background-color:#FF9;
color:#555;
}
div {
padding: 10px;
}
<div><h2>Find and highlight text in document</h2>
<form action="" method="" id="search" name="search">
<input name="query" id="query" type="text" size="30" maxlength="30">
<input name="searchit" type="button" value="Search" onClick="highlightSearch()">
</form></div>
<div id="searchtext">
<p>JavaScript is the programming language of the Web. The overwhelming majority of
modern websites use JavaScript, and all modern web browsers—on desktops, game
consoles, tablets, and smart phones—include JavaScript interpreters, making Java-
Script the most ubiquitous programming language in history. JavaScript is part of the
triad of technologies that all Web developers must learn: HTML to specify the content
of web pages, CSS to specify the presentation of web pages, and JavaScript to specify
the behavior of web pages. This book will help you master the language.</p>
<p>If you are already familiar with other programming languages, it may help you to know
that JavaScript is a high-level, dynamic, untyped interpreted programming language
that is well-suited to object-oriented and functional programming styles. JavaScript
derives its syntax from Java, its first-class functions from Scheme, and its prototypebased
inheritance from Self. But you do not need to know any of those languages, or
be familiar with those terms, to use this book and learn JavaScript.</p>
<p>The name "JavaScript" is actually somewhat misleading.
<span>Except</span>
for a superficial syntactic
resemblance, JavaScript is completely different from the Java programming language.
And JavaScript has long since outgrown its scripting-language roots to become
a robust and efficient general-purpose language. The latest version of the language (see
the sidebar) defines new features for serious large-scale software development.</p>
</div>
最佳答案
请尝试下面的 JS -
function highlightSearch() {
var text = document.getElementById("query").value;
if ($("#searchtext").has(":contains("+text+")").length) {
$('#searchtext').show();
}
else
{
$('#searchtext').hide();
}
var query = new RegExp("(\\b" + text + "\\b)", "gim");
var e = document.getElementById("searchtext").innerHTML;
var enew = e.replace(/(<span>|<\/span>)/igm, "");
document.getElementById("searchtext").innerHTML = enew;
var newe = enew.replace(query, "<span>$1</span>");
document.getElementById("searchtext").innerHTML = newe;
}
#searchtext span{
background-color:#FF9;
color:#555;
}
div {
padding: 10px;
}
#searchtext {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
关于javascript - 如何在查找与搜索框匹配的文本时打开描述 p 标签,否则应禁用 p 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34282705/
我想为我们的网站创建一个自定义搜索框。让它工作如下: function bookssearch(bs) { window.open('http://webpac.kdu.edu.my/s
我需要向我的搜索系统添加一个弹出窗口事件 - 当客户仅输入 2 个字符时,它应该弹出一个带有警报 e 的小表格。 G。 “搜索时必须输入至少 3 个字符...”并且背景应变灰。 这对我来说可能吗?这是
我的以下功能存在格式问题。正如您将在下面看到的,它大部分都有效,只是搜索框的格式不是我想要的(我想复制 typeahead Twitter Bootstrap 功能): 用户可以在搜索框中输入书名,在
我正在尝试使用 php 和 jquery 实现一个搜索框(搜索结果来自数据库)。我想要做的是,当用户在搜索框中键入内容时,将进行查询以查找包含用户在搜索框中输入的关键字的数据。我遇到的问题是我有这样的
我想知道为什么当我在我的计算机上本地加载 Angular 搜索框时它不起作用。我使用的是相同的代码,当我使用 codepen、plunker 或 jsfiddle 等网站时,它确实有效。它无法正常工作
我想知道如何在鼠标悬停事件上将焦点设置到输入字段。 我想知道当鼠标悬停在输入字段或焦点字段上时如何加载输入字段或焦点字段,以便在光标触摸或鼠标悬停在搜索框的输入字段上时轻松准备打字。 最佳答案 您可以
我有index.jsp,我想搜索视频,但每当我搜索时,它都会给我带来不同的错误,并且我无法获得结果,就像它应该将用户带到搜索文本所在的页面一样。 Search.java import java.io.
所以搜索就像'Ozzie Smith' 第一个表有 (username, fname, lname) = osmith, ozzie, smith 第二张表有 (username, team) = o
有什么方法可以启动/打开带有代码的搜索框,或者只需单击搜索键即可? 最佳答案 SearchManager mgr = ((SearchManager) getSystemService(Context
废话不多说了,直接给大家贴关键代码了,具体代码如下所示: ? 1
我想制作一个具有自动建议并搜索 XML 文件中特定标签的搜索框。我怎样才能实现这一点? 最佳答案 这取决于您所说的 XML 文件的含义。 XML 文件在某些服务器上可用吗? 看看jQuery及其
我用javaee6和jsf2开发了一个小应用程序。我想要一个没有按钮的搜索字段(只需键入并按 Enter 键并给出结果)。我在 bean 中有一个搜索方法: public Book searchByT
首先,这个标题是我能想到的最好的标题。 我编写了一个非常短的小脚本来执行实时搜索。 它的基本原理是: (function ($) { $.fn.SearchThing = function (
我正在用 Java 创建一个简单的桌面应用程序,它显示当前正在运行的服务。我想在顶部添加一个谷歌搜索栏,可以直接在默认浏览器中打开应用中输入的关键字的谷歌搜索结果(网页)。 最佳答案 您应该从输入框中
美好的一天。我正在研究我的搜索框。我如何从多列中进行搜索。除了“id”列之外,我还有名字、姓氏、RFIDnum。我如何将它们添加到我当前的代码中。 这是我的代码: DataView dv = new
在 this site ,右上角的搜索框不起作用。 我尝试向父元素添加 z-index: .col-right-one-thirds { max-width: 22.38033333em;
我想要在 bootstrap 3+ 中带有选择选项和清除按钮的大搜索框。我尝试了下面的代码,但它没有正确对齐。
执行此代码$("input[name=q]").value = "Hello"; 应在 stackoverflow 搜索框中输入“Hello”。然而它仍然是空的。为什么? 最佳答案 因为它应该是: $
我是新手。我尝试制作一个搜索框。当我在 Firefox 上打开它时。对我来说没关系。然后我在 IE、Chrome 和 Safari 中执行此操作。实际上并不酷。有谁知道我的问题,请帮我解决一下? 我想
当用户加载我的页面时,浏览器中第一个激活的元素是我的菜单按钮之一。 我的页面上有一个搜索框(表单域),我希望它成为第一个激活的东西。 我所说的“事件”是指当用户按下选项卡按钮时,它会循环浏览网站上的所
我是一名优秀的程序员,十分优秀!