How to use variable outside of $.get function

Question

With Bootstrap Typeahead 3 I did an autocomplete input. Json returns two value with json. json_encode ( array ( 'rules'=> 'hede', 'searchResult' => $communityStuff->searchCommunity( $input ) ) ); first returns search results to input and second result is some text for the selected result. that text needs to be displayed in another div when the a result selected within the input.

I cannot use json values outside of the $.get function. How can I use values that returned from database in the on change function?

here is my code:

$(document).ready(function() {

var $input = $('.communityForText, .communityForLink, .communityForQuestion, .communityForThought');
$input.typeahead({
    source: function (query, process) {
        return $.get('/typeahead/' + query, function (data) {
            var json = JSON.parse(data);
            return process(json.communityName);
        });

    }
}).change(function() {
    var current = $input.typeahead("getActive");
    if (current) {
        console.log(json);
        if (current.name == $input.val()) {
            function displayData(param) {
                console.log(json);
            }
        } else {
            // This means it is only a partial match, you can either add a new item 
            // or take the active if you don't want new items
        }
    } else {
        // Nothing is active so it is a new value (or maybe empty value)
    }
});
});