如何搜索文本與主張有搜索，下一個，上查詢按鈕

我需要從搜索頁面。我發現這個很好的鏈接文字，但我定義修改在這方面他們僅次於使用的東西 https://github.com/nmartynenko/jquery-search-plugin.Actually和以前的按鈕，工作正常。但我需要添加一個這樣的功能。如何搜索文本與主張有搜索，下一個，上查詢按鈕

1）添加一個搜索按鈕，點擊它會突出顯示第一個發生的搜索文本，或者說沒有找到匹配。之後它不會做任何事情。 2）選擇下一個後它會從第二個出現的文本，然後下一個搜索..

這裏是我的代碼..

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 

    <style type="text/css"> 

     body{ 
      font-family: Arial, Helvetica, Verdana, sans-serif; 
      font-size: 12px; 
     } 

     #searchDemo{ 
      width: 600px; 
     } 

     #searchContent{ 
      border: 2px solid #CCCCCC; 
      border-radius: 0 0 0 0; 
      height: 200px; 
      margin: 0 auto; 
      overflow: auto; 
      padding: 5px; 
      width: 584px; 
     } 

     .back a{ 
      color: #000000; 
      font-weight: bold; 
      text-decoration: none; 
     } 

     .message { 
      font-size: 13px; 
      font-style: italic; 
     } 

     label{ 
      clear: both; 
      float: left; 
      font-size: 13px; 
      width: 100px; 
     } 

     .searchForm{ 
      background: none repeat scroll 0 0 #CCCCCC; 
      border: 1px solid #999999; 
      margin: 15px 0 5px; 
      padding: 5px; 
     } 
    </style> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
    <script src="../lib/jquery.textselect.min.js" type="text/javascript"></script> 
    <script src="../lib/jquery.scrollTo.min.js" type="text/javascript"></script> 
    <script src="../jquery.search.min.js" type="text/javascript"></script> 
    <script> 
     jQuery(document).ready(function($) { 

      //create searcher 
      var searcher = $("#searchContent").search({ 
       searchType: "highlightSelected", 
       searchSelector : "p", 
       scrollTo : true 
      }); 

      //make sure we find the same text, otherwise clear search postions 
      function find(up) { 
       var currentText = searcher.getText(); 

       var text = $("#searchText").val(); 



       if (text != currentText) { 
        searcher.setText(text); 
        // alert(getConcurrencesNumber()); 

       } 

       searcher.nextConcurrence(up); 
      } 

      //bind events 
      $("#prev").click(function(e) { 
       e.preventDefault(); 

       find(true); 
      }); 

      $("#next").click(function(e) { 
       e.preventDefault(); 

       find(false); 
      }); 
       $("#search").click(function(e) { 
       e.preventDefault(); 

       find(true); 
      }); 


     }) 
    </script> 
</head> 
<body> 

<div id="searchDemo"> 
    <p class="back"><a href="https://github.com/nmartynenko/jquery-search-plugin"> &lt;&lt; Back to project page</a></p> 

    <p class="message">To search over content, please fill input field and click "Previous" or "Next".</p> 

    <noscript> 
     <p>Please enable JavaScript to use search plugin.</p> 
    </noscript> 

    <div class="searchForm"> 
     <div> 
      <label>Search text</label> 
      <input type="text" id="searchText" value="sit"/> 
      <input type="button" id="prev" value="Previous"> 
      <input type="button" id="next" value="Next"> 
      <input type="button" id="search" value="search"> 
     </div> 

    </div> 

    <div id="searchContent"> 
     <p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
     <p>Nunc molestie fringilla risus, non pulvinar sapien molestie at.</p> 
     <p>Ut id eleifend turpis.</p> 
     <p>Praesent ac ipsum nec magna gravida convallis.</p> 
     <p>Suspendisse sed magna leo, eu tincidunt dui.</p> 
     <p>Suspendisse potenti.</p> 
     <p>Ut malesuada dictum odio quis egestas.</p> 
     <p>Aenean mollis ornare leo, at auctor neque consequat a.</p> 
     <p>Morbi in nibh quis nisl aliquet dignissim vel non nulla.</p> 
     <p>Sed leo metus, consectetur et commodo sit amet, molestie nec urna.</p> 
     <p>Quisque vestibulum dictum odio, vitae vulputate velit sodales sit amet.</p> 
     <p>Fusce sit amet diam nunc.</p> 
     <p>Nullam semper, nisi id pulvinar eleifend, eros tortor semper mauris, id facilisis mauris justo ut erat.</p> 
     <p>Ut dolor nunc, rutrum in imperdiet et, ultrices a turpis.</p> 
     <p>Nam convallis luctus est, quis ornare metus semper non.</p> 
    </div> 

</div> 

</body> 
</html>

來源

2013-07-13 Rohit

你能快速提出你的問題嗎？ –

http://jsfiddle.net/ravi1989/SMLpS/ – Rohit

在這裏我的代碼，但我不能夠添加js sorch文件 – Rohit

試試這個：

查找是否有任何發生如果有，則找到第一個出現。

if(searcher.getConcurrencesNumber() > 0){ 
    searcher.findConcurrence(0); 
}

來源

2013-07-13 09:01:15

，但點擊下一個它也顯示零occurrence.I認爲它從第一個開始.. – Rohit

好吧，我會檢查..！ – Rohit

你能回答這些問題嗎？也可以這樣回答這個問題.http：//stackoverflow.com/questions/17622604/fluctuation-using-jquery-mobile-in-ios-and-android-phonegap-while-opening-pop-u – Rohit

如何搜索文本與主張有搜索，下一個，上查詢按鈕

回答

相關問題