标签内的 jQuery JSON 搜索引擎

Question

我喜欢 Font-Awesome，但有时寻找正确的图标是一件很痛苦的事：即没有“fa-help”图标，但我必须记住那是“fa-question”；没有“fa-magnifying-glass”或“fa-view”，而是“fa-search”等等。搜索正确的图标通常是浪费时间。

这里有一个想法：一个基于 JSON 的搜索引擎，我在其中输入一个术语（或标签）并返回正确的图标。即，给定这个 JSON：

{

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

}

搜索“tick”或“approve”应该返回“fa-check”；搜索“图片”应该返回“fa-camera”和“fa-camera-retro”（以及与标签“图片”相关的任何其他图标），等等。

当然，输入标签的一部分（即“图片”）并在键入时显示正确的图标作为一种自动完成功能当然也很好：但也许我走得太远了:-)

我可以很容易地用 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/