javascript - jQuery 在 JSON 中搜索特定值

Question

我是 jQuery 和 JSON 的新手(当您查看下面的代码时，您很快就会发现我有多新)。

我有一个 JSON 文件，我希望允许用户输入搜索词(这将是 JSON 文件中的键)并让相应的 JSON 值显示在网页上。

我搜索了这个论坛和网络，并使用我找到的示例，将脚本和一些 HTML 组合在一起，但令人惊讶的是，它不起作用。我对脚本的作用有一个粗略的了解，但我发现很难找出问题所在。

希望有人能帮忙。

HTML:

<input type="search" name="search" id="search">

jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

$('#search').keyup(function() {
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, "i");
    $.get('products.json', function(data) {
        var output = '<ul class="searchresults">';
        $(data).find(searchField).each(function(index, value){
            var val = value.firstChild.nodeValue;
            if ((val.search(myExp) != -1)) {
                output += '<li>' + val + '</li>';
            }       
        });
        output += '</ul>';
        $('#result').html(output);
    });  
});

</script>

JSON (products.json)(JSON 文件会比这个长。我已经简化了):

{"colors":[
    {"A":"red"},
    {"B":"green"},
    {"C":"blue"}
]}

因此，如果用户在 HTML 搜索字段中输入“B”，我希望网页上显示“绿色”。

Answer 1

请尝试这个:

$('#search').keyup(function() {
    var searchField = $('#search').val();
    $.getJSON('https://api.myjson.com/bins/59t77', function(data) {
    console.log(data);
        var output = '<ul class="searchresults">';
        $.each(data.colors, function(k, obj) {
            if(obj[searchField]) {
                output += '<li>' + obj[searchField] + '</li>';
            }
        });
        output += '</ul>';
        $('#result').html(output);
    });  
});

通过对您的具体问题进行更多解释，我也许能够帮助您找到更好的替代方案。

演示: https://jsfiddle.net/iRbouh/0z228fya/