JSFiddle - React, Tailwind, and code Playground

HTML

<div id="post-label">Select a post (type "W" for a start):</div>
<input id="post" />
<input type="hidden" id="post-id" />
<p id="post-title"></p><p id="post-description"></p><p id="post-other"></p>

CSS

#post-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
}
#post-description {
    margin: 0;
    padding: 0;
}

input {
  padding: 6px;
}

JavaScript

$(function() {
    var posts = [
        {
            value: "desgin",
            label: "Web design",
            tags: "news, 2016",
            categories: "trends"
        },
        {
            value: "programming",
            label: "Everything about programming",
            tags: "online",
            categories: "learn, knowledge base"
        }
    ];
    
    function filter_out(request, response) {
        function hasMatch(s) {
            return s.toLowerCase().indexOf(request.term.toLowerCase())!==-1;
        }
        var i, l, obj, matches = [];

        if (request.term==="") {
		    response([]);
            return;
        }
           
        for  (i = 0, l = posts.length; i<l; i++) {
            obj = posts[i];
            if (hasMatch(obj.label) || hasMatch(obj.tags) || hasMatch(obj.categories)) {
                matches.push(obj);
            }
        }
        response(matches);
    }
    
    $( "#post" ).autocomplete({
        minLength: 0,
        source: filter_out,
        focus: function( event, ui ) {
            $( "#post" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#post" ).val( ui.item.label );
            $( "#post-id" ).val( ui.item.value ); // is this needed?
            $( "#post-title" ).html( ui.item.label );
            $( "#post-tags" ).html( ui.item.tags );
            $( "#post-categories" ).html( ui.item.categories );
            
            return false;
        }
    })
    
    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
            .append( "<a>" + item.label + 
                "<br><span style='font-size: 80%;'>Tags: " + item.tags + "</span>" +
                "<br><span style='font-size: 60%;'>Categories: " + item.categories + "</span></a>" )
            .appendTo( ul );
    };
});