SO fiddle

Test Fiddle mainly for SO Questions

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<link href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
    
<div id="content">
    
<h1>Suggestion de catégories</h1>

    
<h2>Article sur enwiki</h2>

    <input id="search" type="text" />
    
<h2>Catégories sur frwiki</h2>

<h3>Catégories primaires</h3>

    <div class="result" id="primary" contenteditable="true" onfocus="document.execCommand('selectAll', false, null)"></div>
    
<h3>Catégories secondaires</h3>

    <div class="result" id="secondary" contenteditable="true" onfocus="document.execCommand('selectAll', false, null)"></div>
</div>

CSS

body {
    font-family:'Ubuntu', sans-serif;
    font-size: 11pt;
    margin: 0;
    background:rgb(240, 240, 240);
    color:rgba(0, 0, 0, 0.5);
}
h1 {
    line-height: 42pt;
    font-size: 24pt;
    font-weight: bold;
    color: #111;
}
h2 {
    line-height: 32pt;
    font-size: 16pt;
    color:#57ABE6;
}
h3 {
    line-height: 28pt;
    font-size: 14pt;
    color:#888;
}
#search {
    padding: 5px;
    border: 1px solid #999;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius:4px;
}
#content {
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    min-width: 30em;
}

.result {
    font-family: Courier New, Courier, Prestige, monospace;
}

JavaScript

var url = 'http://en.wikipedia.org/w/api.php?callback=?';

$('input').keyup(function (e) {
    if (e.keyCode == 13) {
        $(this).trigger("enterKey");
    }
});

$('input').bind("enterKey", function (e) {
    var search = $('#search').val();;
    $('#results').empty();

    getCategories(search, 1);
});

function getCategories(titles, depth) {
    jQuery.getJSON(url, {
        action: 'query',
        generator: 'categories',
        titles: titles,
        gcllimit: '100',
        gclshow: '!hidden',
        prop: 'langlinks',
        lllang: 'fr',
        format: 'json'
    }).done(function (data) {
        var iw_list = [];
        var no_iw_list = [];

        for (var pageId in data.query.pages) {
            if (data.query.pages.hasOwnProperty(pageId)) {

                var page = data.query.pages[pageId]
                if (page.hasOwnProperty('langlinks')) {
                    iw_list.push('[[' + page.langlinks[0]["*"] + ']]');
                } else {
                    no_iw_list.push(page.title);
                }
            }
        }

        resultDiv = (depth == 1) ? 'primary' : 'secondary';
        document.getElementById(resultDiv).innerHTML = iw_list.join('<br />');

        if (depth == 1 && no_iw_list.length > 0) {
            getCategories(no_iw_list.join('|'), 2);
        }
    });
};