https://goo.gl/IOHPP2

body template

<div class="panel panel-primary">
  <div class="panel-heading">Request an item from the catalog</div>
  <div class="panel-body">
    <input class="form-control" type="search" placeholder="Start typing here to search the list of catalog items" ng-model="c.data.keywords" ng-change="c.server.update()" ng-model-options="{debounce: 250}" />
    <h5 ng-if="!c.data.keywords">Showing the most popular items</h5>
    <ul class="list-group result-container">
      <li class="list-group-item" ng-repeat="item in c.data.items">
        <a href ng-click="c.select(item.sys_id)"><category-icon category="item.category" style="margin-right: 10px"></category-icon>{{item.name}}</a><span class="pull-right">{{item.price}}</span>
        <div class="catalog-item" ng-if="item.sys_id == c.openItem">
            <sp-widget ng-if="c.catalogItemWidget" widget="c.catalogItemWidget" />
          </div>
      </li>
    </ul>
  </div>
  <div class="panel-footer" ng-if="c.data.keywords">
    <ng-pluralize count="c.data.items.length"
                 when="{'0': 'No items found for ',
                     '1': 'One item matching ',
                     'other': 'Found {} items matching '}">
    </ng-pluralize>
    {{c.data.keywords}}
  </div>
</div>

client script

function($location, spUtil) {
  var c = this;
	
	c.select = function(item_id) {
		if (c.openItem == item_id) {
			c.openItem = null;
			return;
		}
		
		renderCatalogItemWidget(item_id);
	}
	
	function renderCatalogItemWidget(item_id) {
		c.catalogItemWidget = null;
		spUtil.get("widget-sc-cat-item", {sys_id: item_id}).then(function(response){
			c.catalogItemWidget = response;
			c.openItem = item_id;
		});
	}
}

css

.result-container {
  margin-top: 10px;
}

.catalog-item {
  background-color: #f5f5f5;
  padding: 10px;
  @include border-top-radius($panel-border-radius);
  @include border-bottom-radius($panel-border-radius);
}

directive

function() {
  return {
    template: '<span class="fa fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-{{::icon}} fa-stack-1x fa-inverse"></i></span>',
    restrict: 'E',
    replace: true,
    scope: {
      category: '='
    },
    link: function(scope, element) {
					
var _iconMap = {
		"b06546f23731300054b6a3549dbe5dd8": "tablet", /* Tablets */
		"15706fc0a0a0aa7007fc21e1ab70c2f": "question", /* Can we help you? */
		"d68eb4d637b1300054b6a3549dbe5db2": "mobile-phone", /* Mobiles */
		"109cdff8c6112276003b17991a09ad65": "print", /* Office and Print */
		"5d643c6a3771300054b6a3549dbe5db0": "print", /* Printers */
		"2c0b59874f7b4200086eeed18110c71f": "plug", /* Peripherals */
		"2809952237b1300054b6a3549dbe5dd4": "desktop" /* Software */
	};
			
	scope.icon = _iconMap[scope.category] || "shopping-cart";
    }
  }
}

server script

(function() {
	if (input.keywords != null && input.keywords != '')
		data.items = getCatalogItems(input.keywords);
	else data.items = getPopularItems();
	
	function getCatalogItems(keywords) {
		var sc = new GlideRecord('sc_cat_item');
		sc.addActiveQuery();
		sc.addQuery('123TEXTQUERY321', keywords);
		sc.addQuery('sys_class_name', 'NOT IN',
								'sc_cat_item_wizard,sc_cat_item_content');
		sc.addQuery('sc_catalogs', '0d08b13c3330100c8b837659bba8fb4');
		sc.setLimit(100);
		sc.orderByDesc("ir_query_score");
		sc.query();
		var results = [];
		while (sc.next()) {
			if (!$sp.canReadRecord(sc))
				continue;
			var item = {};
			$sp.getRecordDisplayValues(item, sc, 'name,price,sys_id');
			item.category = sc.getValue('category');
			results.push(item);
		}
		return results;
	}
	function getPopularItems() {
		var items = [];
		var count = new GlideAggregate('sc_req_item');
		count.addAggregate('COUNT','cat_item');
		count.groupBy('cat_item');
		count.addQuery('cat_item.sys_class_name', 'NOT IN',
									 'sc_cat_item_guide,sc_cat_item_wizard,sc_cat_item_content');
		count.addQuery('cat_item.sc_catalogs', '0d08b13c3330100c8b837659bba8fb4');
		count.orderByAggregate('COUNT', 'cat_item');
		count.query();
		while (count.next() && items.length < 9) {
			if (!$sp.canReadRecord("sc_cat_item",
														 count.cat_item.sys_id.getDisplayValue()))
				continue; // user does not have permission to see this item
			var item = {};
			//$sp.getRecordDisplayValues(item, count.cat_item, 'name,price,sys_id,category');
			item.name = count.cat_item.name.getDisplayValue();
			item.category = count.cat_item.category.toString();
			item.price = count.cat_item.price.getDisplayValue();
			item.sys_id = count.cat_item.sys_id.getDisplayValue();
			items.push(item);
		}
		return items;
	}
})();