Cacher is the code snippet organizer for pro developers

https://stackoverflow.com/questions/14150216/adding-label-value-and-picture-in-bootstraps-typeahead
https://jsfiddle.net/geghamk/59eranrc/3/


DB fields: id | title | sku | product_image

Web Route:
// AUTOCOMPLETE SEARCH PRODUCTS
Route::get('/autocomplete/search', 'Front\\ProductsController@search')->name('autocomplete.search');


HTML:
<div class="form-group">
    <label class="">Search by Product Title *</label>
    <div class="form-group">
        <input type="text"  name="title" class="form-control input-lg product_search" placeholder="Enter Product Title">
    </div>
</div>

<strong>Or </strong>

<div class="form-group">
    <label class="">Search by Product SKU *</label>
    <div class="form-group">
        <input type="text" name="sku"  class="form-control input-lg product_search" placeholder="Enter Product SKU">
    </div>
</div>

<?php
// Controller method:
public function search()
{
    return json_encode(Product::all() );
}

<script>
// JS bottom of Page
function productSearch() {
    $.get("{{ route('autocomplete.search') }}", function(data) {
        // (1) Products Array
        var productNames = [];

        // (2) Get row of products first, with '#' delimiter
        $.each(data, function(index, product) {
            productNames.push(product.title + "#" + product.product_image + "#" + product.sku);
        });
        // console.log('ProductNames: ' + productNames) ;

        $( '.product_search' ).typeahead({
            minLength: 2,
            highlight: true,
            source: productNames,
            autoSelect: false,
            // displayText() is not needed

            highlighter: function (item) {  // source is productNames, this is passed as 'item'
                let parts = item.split('#') ; // (3) split product rows
                // ProductNames:
                // Test Product 001#80.png#TEST-001,
                // Test Product 002#80.png#TEST-002,
                // Test Prod 3#80.png#TEST-003,
                // Baron Series SD-AZ001#5dbb5bd23119d_single_basin2.jpg#BAR-001
                console.log('part0: ' + parts[0]) ;
                console.log('part1: ' + parts[1]) ;
                console.log('part2: ' + parts[2]) ;

                console.log('item in highlighter: ', item) ;

                return '<img src="/images/' + parts[1]  + '">' + parts[0] ; // (4) highlight product Image + Title
            },

            // (5) Filtered Text that is returned to the input field excluding the image shown in highlighter(step 4)
            updater: function(selectedTitle) {
                var title = selectedTitle.split('#')[0];
                return title;
            }

        });
    },'json');
}

</script>