jQuery search JSON for a particular value
<p>I'm new to jQuery and JSON (when you look at my code below you'll quickly see how new I am).</p>

<p>I've got a JSON file and I want to allow users to input a search term (which will be a key in JSON file)) and have the corresponding JSON value be displayed on the web page.</p>

<p>I've searched this forum and the web and, using examples I've found, I've hacked together a script and some HTML but, surprise!, it's not working. I have a rough idea of what the script is doing but I'm finding it very difficult to sort out what is wrong.</p>

<p>Hoping someone can help.</p>

<p>HTML:</p>

<pre><code>&lt;input type="search" name="search" id="search"&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;

&lt;script&gt;

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

&lt;/script&gt;
</code></pre>

<p>JSON (products.json)(The JSON file will be longer than this. I've simplified it):</p>

<pre><code>{"colors":[
    {"A":"red"},
    {"B":"green"},
    {"C":"blue"}
]}
</code></pre>

<p>So, if a user types 'B' into the HTML searchfield, I want 'green' to be displayed on the web page.</p>