如何在javascript中创建简单的搜索功能？

Question

我从一些学校开始，然后我想测试一个输入的值是否与这些学校中的一个匹配。 这里是我的代码至今：

var $schools = [ 
    'University of Tennessee-Knoxville', 
    'Maryville College', 
    'Cleveland State Community College', 
    'East Tennessee State University' 
    ]; 
    var $searchBar = $('input.searchBar'); 
    $searchBar.keyup(function(){ 
     var $searchValue = $searchBar.val(); 
     for (var x = 0; x < $schools.length; x++) { 
      var $schoolLC = $schools[x].toLowerCase(); 
      var $searchLC = $searchValue.toLowerCase(); 
      var $searchingValue = new RegExp('.*' + $searchLC + '.*'); 
      if ($schoolLC.match($searchingValue)) { 
       console.log($searchLC); 
      } 
     } 
    }); 

但事情显然是错误的（我相信我的正则表达式），因为它从来没有console.logs的$ searchLC。

非常感谢！

Answer 1

这不是

if ($searchLC.match($searchingValue)) { 

应该是

if ($schoolLC.match($searchingValue)) { 

Answer 2

我想你需要逃避所有正则表达式特殊字符：

function escapeRegExp(str) { 
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
} 

... 
var $searchingValue = new RegExp('.*' + escapeRegExp($searchLC) + '.*'); 
... 

Answer 3

试试这个：Live Demo

for (var x = 0; x < $schools.length; x++) { 
    var $schoolLC = $schools[x].toLowerCase(); 
    var $searchLC = $searchValue.toLowerCase(); 
    var $searchingValue = new RegExp('.*' + $searchLC + '.*'); 
    if ($schoolLC.match($searchingValue)) { 
     alert($schoolLC); 
    } 
} 

Answer 4

那么，对于这个特殊的例子，而不是使用匹配您可以使用的indexOf使你的代码变得

var $schools = [ 
'University of Tennessee-Knoxville', 
'Maryville College', 
'Cleveland State Community College', 
'East Tennessee State University' 
]; 
var $searchBar = $('input.searchBar'); 
$searchBar.keyup(function(){ 
    var $searchValue = $searchBar.val(); 
    for (var x = 0; x < $schools.length; x++) { 
     var $schoolLC = $schools[x].toLowerCase(); 
     var $searchLC = $searchValue.toLowerCase(); 
     if ($schoolLC.indexOf($searchLC) >= 0) { 
      console.log($searchLC); 
     } 
    } 
});