JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
Type in "p" to start:
<br>
<input type="search">

CSS

.ac-search-col {
		  display: block;
		  width: 10px;
		}
		.result-img-col img {
		  vertical-align: middle;
		  width: 30px;
		  height: 30px;
		  margin-right: 5px;
		}
		.result-info p {
		  font-size: 0.8em;
		}
		input {
		  margin: 10px;
		}

JavaScript

/* see http://jqueryui.com/autocomplete/#custom-data*/
	var availableTags = [{
	  value: "ActionScript",
	  label: "ActionScript",
	  desc: "Description for ActionScript",
	  icon: "http://goo.gl/e7CCV"
	}, {
	  value: "AppleScript",
	  label: "AppleScript",
	  desc: "Description for AppleScript",
	  icon: "http://goo.gl/sRNA0"
	}, {
	  value: "jQuery",
	  label: "jQuery",
	  desc: "Description for jQuery",
	  icon: "http://goo.gl/F5qBP"
	}, {
	  value: "PHP",
	  label: "PHP",
	  desc: "Description for PHP",
	  icon: "http://goo.gl/Z9XnX"
	}, {
	  value: "Python",
	  label: "Python",
	  desc: "Description for Python",
	  icon: "http://goo.gl/1BE5k"
	}];

	$("input").autocomplete({
	  source: availableTags
	})
	  .data('autocomplete')._renderItem = function (ul, item) {
	  return $('<li>')
	    .data("item.autocomplete", item)
	    .append('<a><span class="ac-search-col"></span><span class="result-img-col"><img src="' + item.icon + '" /></span><span class="result-info">' + item.label + '<p>' + item.desc + '</p></span>')
	    .appendTo(ul);
	};