jquery ui autocomplete, multiple values, templated results

by rwone

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<div class="product_container">

<input class="my_lookup" placeholder="search...">
<br><br>
<input class="product_desc">
<br>
<input class="product_type">
<br>
<input class="product_attr_01">
<br>
<input class="product_attr_02">
<br>
</div>


<div class="product_container">

<input class="my_lookup" placeholder="search...">
<br><br>
<input class="product_desc">
<br>
<input class="product_type">
<br>
<input class="product_attr_01">
<br>
<input class="product_attr_02">
<br>
</div>



<div class="product_container">

<input class="my_lookup" placeholder="search...">
<br><br>
<input class="product_desc">
<br>
<input class="product_type">
<br>
<input class="product_attr_01">
<br>
<input class="product_attr_02">
<br>
</div>


<img class="loaded_img" src="https://placeimg.com/30/30/nature">

CSS

.product_container {
  border: 1px solid #ccc; 
  margin-bottom: 10px;
  padding: 10px;
  background: #fff;
}

.my_result {
font-size:15px !important;
padding:15px !important;
font-family: arial !important;
}

.ui-widget-content {
    background: #efefef !important;
}

.ui-widget-content .ui-state-active {
	/* border: 1px solid red;  this controls border color on hover */
	background: #ececec; /* this controls background color on hover */
	font-weight: normal;
	color: #212121;
}

/* see:  https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div */
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.result_img {
    /*float: left;*/
    margin-right: 10px;
    vertical-align: middle;
}

/* to have image ready to display in results, so that dropdown is the correct width */  
.loaded_img {
 display:none;
}


/* 

BEGIN unsuccesful attempts to style autocomplete

.ui-menu-item-wrapper {
  border-bottom: 1px solid purple !important;
}

.ui-menu-item-wrapper .ui-state-active,
.ui-menu-item-wrapper .ui-state-hover {
  border-bottom: 1px solid purple !important;
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
  margin: reset !important;
} 

END unsuccesful attempts to style autocomplete

*/

JavaScript

/*

DESIRED RESULTS:

- Feature 01: Match beginning of object value and description - DONE (i think)
- Feature 02: Multi instances of autocomplete on one page - DONE
- Feature 03: Style results - DONE
- Feature 04: Retrieve multiple object values and add to interface - DONE
- Feature 05: Highlight matched text - TO DO

*/


// BEGIN define array_of_objects
// matches for "010" should be the first and third object above, as:
// object one 'value' starts with 01
// object three 'product_desc' starts with 01

var array_of_objects = [
{value: "01000", product_desc: "a unique orange from spain", product_type: "fruit", product_attr_01: "$5.00", product_attr_02: "$10.00"},
{value: "02000", product_desc: "a unique pear from spain 01", product_type: "fruit", product_attr_01: "$6.00", product_attr_02: "$11.00"},
{value: "02001", product_desc: "01000 desc starts with number", product_type: "fruit", product_attr_01: "$7.00", product_attr_02: "$12.00"}];
// END define array_of_objects



// BEGIN feature 01 VERSION A:  match beginning of string (only works for one value)
// overrides the default autocomplete filter function
// based on:
// http://blog.miroslavpopovic.com/2012/06/23/jqueryui-autocomplete-filter-words-starting-with-term/
// $.ui.autocomplete.filter = function(array, term) {
// var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
// return $.grep(array, function(value) {
// return matcher.test(value.value);
// // return matcher.test(value.product_desc);  // this matches on product_desc
// });
// };
// END feature 01 VERSION A:  match beginning of string (only works for one value)



// BEGIN feature 01 VERSION B: match beginning of string
// look up on two values solution, see:  https://stackoverflow.com/a/15849692
function lightwell(request, response) {
  function hasMatch(s) {
    // to match beginning of string only, see:  https://stackoverflow.com/a/12482182
    // use:  === 0
    // originally was !==-1 (use this if you want to match...