JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://nicolasbize.github.com/magicsuggest/bin/magicsuggest-1.2.3-min.js"></script>
        <h3>Stacking in bottom, ajax source (type 1 char to load)</h3>
        <input id="ms3" style="width:400px;" type="text"/>

JavaScript

var jsonData = [];
var cities = 'New York,Los Angeles,Chicago,Houston,Paris,Marseille,Toulouse,Lyon,Bordeaux,Philadelphia,Phoenix,San Antonio,San Diego,Dallas,San Jose,Jacksonville'.split(',');
for(var i=0;i<cities.length;i++) jsonData.push({id:i,name:cities[i],status:i%2?'Already Visited':'Planned for visit',coolness:Math.floor(Math.random() * 10) + 1});

            $('#ms3').magicSuggest({
                selectionPosition: 'bottom',
                renderer: function(city){
                    return '<div>' +
                            '<div style="font-family: Arial; font-weight: bold">' + city.name + '</div>' +
                            '<div>Cooooolness: ' + city.coolness + '</div>' +
                           '</div>';
                },
                minChars: 1,
                selectionStacked: true,
                data: jsonData
            });