標籤內的jQuery JSON搜索引擎

Question

我喜歡Font-Awesome，但有時搜索正確的圖標就是這樣的痛苦：即沒有「fa-help」圖標，但我必須記住這是「fa-question」 ;沒有「fa-magnifying-glass」或「fa-view」，而是「fa-search」等等。搜索正確的圖標通常是浪費時間。

這裏有一個想法：一個基於JSON的搜索引擎，其中我放置了一個術語（或標記）和正確的圖標（S）返回。即，鑑於此JSON：

{ 

    "fa-camera": [ 
     "camera", 
     "picture", 
     "image" 
    ], 
    "fa-camera-retro": [ 
     "camera", 
     "retro", 
     "picture", 
     "image" 
    ], 
    "fa-check": [ 
     "check", 
     "tick", 
     "approve", 
     "ok" 
    ] 

} 

搜索 「嘀」 或 「批准」 應該返回 「FA-檢查」;搜索「圖片」應返回「fa-camera」和「fa-camera-retro」（以及與標籤「picture」相關的任何其他圖標）等。

當然，輸入標記的一部分（即「pic」）並在鍵入時顯示正確的圖標（作爲一種自動完成功能）也會很好：但也許我也會去進一步:-)

我可以很容易地與MySQL和PHP做到這一點，但我對jQuery的信心並不如此，除了創建表單之外，我不知道從哪裏開始;更具體地說，我不知道如何搜索到標籤的JSON以返回相應的圖標

請幫忙嗎？有沒有一個明確的教程，或者一個jQuery插件？先謝謝你！

Answer 1

你並不真的需要jquery這個簡單的JS。這是一個可能的解決方案。我相信它可以被優化。祝你好運！

var db = { 

    "fa-camera": [ 
     "camera", 
     "picture", 
     "image" 
    ], 
    "fa-camera-retro": [ 
     "camera", 
     "retro", 
     "picture", 
     "image" 
    ], 
    "fa-check": [ 
     "check", 
     "tick", 
     "approve", 
     "ok" 
    ] 

}; 

function searchTags(tag){ 
    var response = []; 
    if(db instanceof Object) 
    { 
     for(j in db) 
     { 
      var tags = db[j]; 
      for(var i=0; i<tags.length; i++) 
      { 
       if(tags[i].toLowerCase().indexOf(tag) != -1) //you can improve this by using a regular expression 
       { 
        response.push(j); 
        break; 
       } 
      } 
     } 
    } 
    else 
    { 
     console.log("Please define a db object"); 
    } 

    return response; 
} 

var tag = prompt("Enter a tag you want to search for", ""); 

alert("Findings: " + searchTags(tag).join()); 

http://jsfiddle.net/y715vbgd/