two columns

Trying to make the autocomplete plugin work with multiple columns.

by Hai Truong

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input id="employeeLookup" />

JavaScript

$("#employeeLookup").autocomplete({
  source: [{
    value: 1,
    label: "Bob Smith",
    JobTitle: "Secretary"
  }, {
    value: 3,
    label: "Bobby Fischer",
    JobTitle: "Secretary"
  }, {
    value: 6,
    label: "Barney Rubble",
    JobTitle: "Secretary"
  }, {
    value: 7,
    label: "Brenda Stevens",
    JobTitle: "Secretary"
  }, {
    value: 2,
    label: "Bob Washington",
    JobTitle: "Vice-President"
  }, {
    value: 4,
    label: "Bobby Brady",
    JobTitle: "Vice-President"
  }, {
    value: 5,
    label: "Bobby Socks",
    JobTitle: "Vice-President"
  }],
  minLength: 1
}).data("ui-autocomplete")._renderItem = function(ul, item) {

  // only append type if it does not exists
  // console.log(ul.children().find('span').end().find(":contains('Secretary')").index())
  var text = ":contains('" + item.JobTitle + "')";
    firstItem = ul.children().find('span').end().find(text).length == 0;
    if (firstItem) {
      var html = "<span class='col-lg-4'>" + item.JobTitle + "</span>" + "<span class='col-lg-8'>" + item.label + "</span>";
      return $("<li class='row col-lg-12'></li>")
        .append(html)
        .appendTo(ul);
    } else {
      var html = "<span>" + "</span>" + "<span'>" + item.label + "</span>";
      return $("<li class='row'></li>")
        .append(html)
        .appendTo(ul);
    }

/*
  var html = "<span>" + item.JobTitle + "</span>";
  html += "<span>" + item.label + "</span>";
  return $("<li class='row'></li>")
    .append(html)
    .appendTo(ul);
    */
};