Question

我不能为我的生活弄清楚为什么这不起作用。

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

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

Answer 1

jQuery有一个方法:contains()，可以使你想要的更容易。

看看这里：fiddle

$("button[type='submit']").click(function () {
    var string = $('#search').val();
    var matched = $('li:contains(' + string + ')');
    matched.css('color','red');
    console.log(matched);
    return false;
});

Answer 2

在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;
});

Example fiddle在FF中测试（工作）。

PS：给出使用<li>的具体示例，我确实认为Sergio的答案是更合适的解决方案，特别是因为它永远不会运行：alert ("Opera browsers not supported, sorry...")，但是<{1}}问题的正确回答仍然是一个有趣的问题！

PS2：如果您基本上使用（或复制）浏览器的搜索功能，为什么不 educate 用户并指示他们点击 Ctrl + ˚F

希望这有帮助！

Answer 3

我找到了修复（有点）。似乎需要在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的末尾时...

Answer 4

我在angularjs app中遇到了同样的问题，我通过改变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>

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

动态window.find无法使用jQuery

4 个答案: