可以添加搜索栏，其功能类似于在网站内使用（命令 F）或（CTRL F）

Question

我有一个客户想要能够在搜索栏中输入关键字并让它在您键入时（或点击搜索后）开始在页面上突出显示结果的功能。

这就像在 Mac（或 Ctrl +F 在 PC 上）和浏览器本身会弹出一个搜索框。不过，他不想必须按 ⌘+F，或者让他的客户必须知道该命令。他只想在该页面上已有一个搜索栏，他可以在其中输入内容并开始突出显示单词。

知道如何在 WordPress 中执行此操作吗？我在互联网上搜索过，但找不到有关如何操作的教程。

如果不是搜索框，也许他们可以单击一个按钮，提示在 mac 或 Ctrl+F 上拉出命令 F 在电脑上？

我在这里不知所措，想不通。任何提示或经验，我将不胜感激。

Answer 1

所以我在另一个线程上发现了这个，它似乎有效，但它只找到了第一次出现的地方。我需要它来突出显示所有事件。知道如何让它做到这一点吗？

<p> hello world, hello world, hello world, hello world</p>

<!--BEGIN SEARCH BOX -->

<div class="search_box">
    <form action="" id="form2">
        <div>
            <input type="text" id="search">
            <input type="button" id="submit_form" onclick="checkInput()" value="Submit">
        </div>
    </form>
</div>

<!--END SEARCH BOX -->
<script>
    function checkInput() {
        var query = document.getElementById('search').value;
        window.find(query);
        return true;
    }
</script>

Answer 2

https://codepen.io/b-jody-spedicato/pen/ExNzqQP

<html>
<head>
<script language="JavaScript">
<!--
var TRange=null;
function findString (str) {
 if (parseInt(navigator.appVersion)<4) return;
 var strFound;
 if (window.find) {

  // CODE FOR BROWSERS THAT SUPPORT window.find
  strFound=self.find(str);
  if (strFound && self.getSelection && !self.getSelection().anchorNode) {
   strFound=self.find(str)
  }
  if (!strFound) {
   strFound=self.find(str,0,1)
   while (self.find(str,0,1)) continue
  }
 }
 else if (navigator.appName.indexOf("Microsoft")!=-1) {

  // EXPLORER-SPECIFIC CODE

  if (TRange!=null) {
   TRange.collapse(false)
   strFound=TRange.findText(str)
   if (strFound) TRange.select()
  }
  if (TRange==null || strFound==0) {
   TRange=self.document.body.createTextRange()
   strFound=TRange.findText(str)
   if (strFound) TRange.select()
  }
 }
 else if (navigator.appName=="Opera") {
  alert ("Opera browsers not supported, sorry...")
  return;
 }
 if (!strFound) alert ("String '"+str+"' not found!")
 return;
}
//-->
</script>
</head>
<body>
<form name="f1" action="" 
    onSubmit="if(this.t1.value!=null && this.t1.value!='') findString(this.t1.value);return false">
    <input type="text" name=t1 value="" size=20>
    <input type="submit" name=b1 value="find">
    <p>This is some sample text, do a search above to see how the search bar functions.
You can now add your own CSS styling.
</p>
</form>
</body>
</html>

可以添加搜索栏，其功能类似于在网站内使用（命令 F）或（CTRL F）

Possible to add search bar that functions like using (command F) or (CTRL F) inside a website

wordpress

search

command

highlight