可以添加搜索栏，其功能类似于在网站内使用 (command F) 或 (CTRL F)答案

【问题标题】：Possible to add search bar that functions like using (command F) or (CTRL F) inside a website可以添加搜索栏，其功能类似于在网站内使用 (command F) 或 (CTRL F)
【发布时间】：2016-05-21 16:34:49
【问题描述】：

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

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

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

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

我在这里不知所措，无法弄清楚。任何提示或经验，我将非常感激。

【问题讨论】：

标签： wordpress search command highlight

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：