JavaScript-在頁面中查找文本並跳轉到頁面中的位置

我有一個包含大量記錄列表（比如表中有250多行數據）的網頁，並希望能夠訪問該頁面，立即啓動打字，並讓它跳轉到與我輸入的文字相匹配的第一行。JavaScript-在頁面中查找文本並跳轉到頁面中的位置

理想情況下，如果我繼續輸入更多的字符，以便第一個匹配不再匹配，它可以繼續響應我的輸入並跳轉到新匹配。

我試過用window.find（），但沒有太多成功......任何人都可以推薦一個工作解決方案嗎？

我基本上在尋找相當於擊鍵盤上的'CTRL-F'......除了不需要按CTRL-F就可以實現。

來源

2010-12-01 Keith Palmer Jr.

我覺得這個棘手的部分實際上是智能地接受用戶輸入。因此，我認爲最好的做法是將搜索傳遞給自動完成類型的插件。一旦頁面準備就緒，您將焦點傳遞給輸入文本框，然後讓插件在您搜索時執行其魔術...

例如，您可以使用quicksearch插件。

然後給出的數據表和輸入這樣的：

<input id="searcher" type="text" name="searcher">

你可以有一個現成的功能，看起來像這樣：

$('#searcher').quicksearch('table tbody tr', { 
    'delay': 100, 
    'bind': 'keyup keydown', 
    'show': function() { 
     if ($('#searcher').val() === '') { 
      return; 
     } 
     $(this).addClass('show'); 
    }, 
    'onAfter': function() { 
     if ($('#searcher').val() === '') { 
      return; 
     } 
     if ($('.show:first').length > 0){ 
      $('html,body').scrollTop($('.show:first').offset().top); 
     } 
    }, 
    'hide': function() { 
     $(this).removeClass('show'); 
    }, 
    'prepareQuery': function(val) { 
     return new RegExp(val, "i"); 
    }, 
    'testQuery': function(query, txt, _row) { 
     return query.test(txt); 
    } 
}); 

$('#searcher').focus();

嘗試一下這裏：http://jsfiddle.net/ZLhAd/369/

編輯：添加其他答案/評論以使輸入固定並停止scollbar如此荒唐地跳躍。

來源

2010-12-01 19:07:11 Ryley

哇，這個石頭！謝謝！ – 2010-12-01 19:55:47

由於github不是一個正確的cdn，它不能得到js文件加載的問題上的小提琴被打破..固定它與 http://jsfiddle.net/ZLhAd/205/ – Kender 2015-08-06 13:29:19

OK，這裏有不同的看法，直接使用按鍵：

http://jsfiddle.net/ryleyb/VFVZL/1/

基本上，綁定按鍵，並使用：

$('body').keypress(function(e) { 
    $('#typed').append(String.fromCharCode(e.which)); 
    if (!findString($('#typed').text())) { 
     $('#typed').text(''); 
    } 
});

findString只是一些模糊的跨瀏覽器的網頁字符串取景器。詳情請看小提琴。

來源

2010-12-01 19:24:54 Ryley

JavaScript-在頁面中查找文本並跳轉到頁面中的位置

回答

相關問題