0

我一生都无法弄清楚为什么这不起作用。

我想使用搜索框在当前页面中搜索文本。我用谷歌搜索发现：http ://www.javascripter.net/faq/searchin.htm 。我在我的网站中实现了代码，但它不起作用。该函数 ( findString()) 有效，但仅当我对字符串进行硬编码时（如我不能使用 javascript 或 jquery 来获取文本输入的值）。我做了这个小提琴：http: //jsfiddle.net/alyda/CPJrh/4/来说明这个问题。

您可以取消注释不同的行以查看我测试过的内容。

4

4 回答 4

1

jQuery has a method :contains() that will make easier what you are looking for.

Take a look here: fiddle

$("button[type='submit']").click(function () {
    var string = $('#search').val();
    var matched = $('li:contains(' + string + ')');
    matched.css('color','red');
    console.log(matched);
    return false;
});
于 2013-09-22T07:19:21.313 回答
0

在 Firefox 中，我注意到问题中给出的小提琴（v4）有效，但不是提问者期望的那样。

在 Firefox 中发生的是该函数确实找到了值..：您刚刚在输入字段中输入了它。然后浏览器的find方法似乎挂在输入“控件”的“上下文”中，并没有脱离它。由于浏览器将从最后一个活动位置继续搜索，如果您在输入字段之后选择任何内容，该功能将按预期工作。所以诀窍是不要在搜索开始时在输入字段中“被困”。

关于如何摆脱它的基本（肮脏）示例（不一定是正确的解决方案，也不一定是纯 jquery，但可能会激发一个有用的例程，因为您现在知道 FF 中问题的根源）：

$( "button[type='submit']" ).click(function(){

    var tst=$('#search').val(); //close over value
    $('#search').val('');       //clear input
    if(tst){                    //sanity check
      this.nextSibling.onclick=function(){findString( tst );}; //example how to proceed
      findString( tst );  //find first value
    } else { alert('please enter something to search for'); }
    return false;
});

示例小提琴在 FF 中进行了测试（工作）。

PS：鉴于您使用的具体示例<li>，我确实认为 Sergio 的答案将是一个更合适的解决方案，尤其是因为它永远不会运行 line: ，但是对您的问题alert ("Opera browsers not supported, sorry...")的正确答案window.find仍然是一个有趣的答案！

PS2：如果您实际上是在使用（或复制）浏览器的搜索功能，为什么不教育用户并指示他们点击Ctrl+ F？

希望这可以帮助！

于 2013-09-22T08:11:29.747 回答
0

我找到了一个修复（有点）。似乎需要将输入放置在要在 DOM 中搜索的内容之后。这意味着我做了以下事情：

<section class="content">
  <h2>Fire</h2>
  <h3>Fire Extinguishers</h3>
  <ul>
    <li>Model 240</li>
    <li>Model C352, C352TS</li>
<li>Model C354, C354TS</li>
  </ul>
  ...
  <div id="navbar">
    <ul>
      ...
    </ul>
    <input id="search" type="text" class="form-control pull-left" placeholder="Search for part number">
    <button id="submit" type="submit" class="btn btn-default pull-left" style=" margin-top:6px;">Search</button>
  </div>

如您所见，我已将输入（位于导航栏 div 中）移动到我要搜索的所有文本下方，并使用 CSS 以编程方式将导航栏放置在页面顶部。我不是特别喜欢这种设置（因为它会扰乱内容流），但由于我一直在寻找最快和最简单的单页搜索实现，所以它必须这样做。

我仍然很想知道为什么会发生这种情况，当 javascript 位于它所属的 DOM 的末尾时......

于 2013-09-23T04:54:56.863 回答
0

我在 angularjs 应用程序中遇到了同样的问题，我通过更改 DOM 结构来修复它。
我的 HTML 代码是这样的：

<body>
       <div class="content" >
            <input class="searchInput" />
            <p>
                content ....
            </p>
       </div>
</body>

我把它改成这样：

<body>
       <div class="search">
            <input class="searchInput" />
       </div>

       <div class="content">
            <p>
                content ....
            </p>
       </div>
</body>

注意：我知道这个话题已经过时了。

于 2018-03-11T09:13:01.680 回答