構建可搜索詞彙表網頁

有沒有在單個網頁中構建搜索功能的方法？我需要將一個小詞彙錶轉換成一個網頁，他們希望它可以被搜索（詞彙表只有大約30個詞和定義）。我想用JavaScript來做這件事，因爲我沒有任何DB類型的編程經驗，我最初的想法是有一個文本輸入字段，並基於用戶的輸入跳轉到頁面中的哈希URL（如果散列存在）。這是做這件事的最好方法嗎？我一直在做一些搜索提供這種功能的插件，但沒有遇到什麼？最好的處理這種事情的任何類型的方向將是有幫助的。構建可搜索詞彙表網頁

感謝

來源

2014-02-11 cpwynn

而不是搜索我猜我更好的詞是我要找的是過濾器。所以當用戶輸入搜索字段時，可以篩選定義的列表。 – cpwynn

下面是我扔在一起的例子...

var foos = document.getElementsByClassName('foo'), 
    srch = document.querySelector('#search'); 

srch.addEventListener('keyup', function() { 
    var i = 0; 
    for(; i < foos.length; i++) { 
     if(foos[i].innerHTML == srch.value) { 
      foos[i].classList.add('match'); 
     } else { 
      foos[i].classList.remove('match'); 
     } 
    } 
});

DEMO

您可能需要包裹匹配功能在的setTimeout或東西，以避免在搜索每一次按鍵。

來源

2014-02-11 20:33:09 brbcoding

構建可搜索詞彙表網頁

回答

相關問題