Jquery autocomplete fill in another field when selected

Question

I have a form I am building with multiple input fields. I currently have autocomplete working with a remote JSON response. I would like to have it so when I click on the product name it fills in the remaining product information for me like description and Price. The text input id is description and price. How can I complete this? I have the following javascript code now and it works with Product name.

Javascript File:

$( document ).ready(function() {
    "use strict";

    var searchRequest = null;
    $("#product-search").autocomplete({
        minLength: 3,
        source: function(request, response) {
            if (searchRequest !== null) {
                searchRequest.abort();
            }
            searchRequest = $.ajax({
                url: '/includes/estimate-search.php',
                method: 'post',
                dataType: "json",
                data: {term: request.term},
                success: function(data) {
                    searchRequest = null;
                    response($.map(data, function(Product) {
                        return {
                            value: Product.Name,
                            label: Product.Name
                        };
                    }));
                }
            }).fail(function() {
                searchRequest = null;
            });
        }
    });
});

JSON Response Example:

[
    {
        "Name": "Control 4  C4-EA1",
        "Description": "Control4 EA-1 Entertainment and Automation Controller",
        "SKU": "C4-EA1",
        "Cost": "xxx.00   ",
        "Price": "xxx.00   "
    }
]

HTML Portion:

<table id="estimate" class="dispaly table table-striped">
    <thead>
       <tr>
            <th class="col-md-2">Name</th>
            <th class="col-md-4">Description</th>
            <th class="col-md-2">SKU</th>
            <th class="col-md-2">Cost</th>
            <th class="col-md-2">Price</th>
       </tr>
    </thead>
    <tbody id="estimate_row">
       <tr>
            <td><input type="text" name="product-search" id="product-search" class="form-control typeahead" placeholder="Product Name" /></td>
            <td><input type="text" name="description" id="description" class="form-control typeahead" placeholder="Description" /></td>
            <td><input type="text" name="sku" id="sku" class="form-control typeahead" placeholder="SKU" /></td>
            <td><div class="input-group"><span class="input-group-addon">$</span><input type="text" name="cost" id="cost" class="form-control typeahead" placeholder="Cost" /></div></td>
            <td><div class="input-group"><span class="input-group-addon">$</span><input type="text" name="price" id="price" class="form-control typeahead" placeholder="Price" /></td></div></td>
        </tr>
    </tbody>
</table>

Just added the html portion that is what I am looking to affect when the product name is chosen. — Mark Lordi, Aug 22 '17 at 20:51

jonhendrix · Answer 1 · 2017-08-22T22:55:39.847

Here's a working jsfiddle: https://jsfiddle.net/jonolayton/4Le0ugka/

And here's what I did:

var objArray = [
    {
        "Name": "Control 4  C4-EA1",
        "Description": "Control4 EA-1 Entertainment and Automation Controller",
        "SKU": "C4-EA1",
        "Cost": "123.00",
        "Price": "456.00"
    },
    {
        "Name": "Something else",
        "Description": "Something more",
        "SKU": "AB-CD1",
        "Cost": "789.00",
        "Price": "101.00"
    }
];
var nameArray = [];
var descArray = [];
var skuArray = [];
var costArray = [];
var priceArray = [];

$( document ).ready(function() {
    "use strict";

    buildArrays();

    var searchRequest = null;
    $("#product-search").autocomplete({
        minLength: 3,
        source: nameArray,
        select: function( event, ui ) {
            var val = ui.item['value'];
            fillOtherValues(val);
        }
    });
});

function buildArrays() {

    $(objArray).each(function(key) {

        for ( i=1; i<objArray.length; i++ ) {
            nameArray.push(this.Name);
            descArray.push(this.Description);
            skuArray.push(this.SKU);
            costArray.push(this.Cost);
            priceArray.push(this.Price);
        }
    });
}

function fillOtherValues(val) {
    var index = $.inArray( val, nameArray );
    $('input#description').val(descArray[index]);
    $('input#sku').val(skuArray[index]);
    $('input#cost').val(costArray[index]);
    $('input#price').val(priceArray[index]);
}

It's not beautiful, but it works... I'm sure many folks can improve on this...

I'm using a document.ready block, but obviously you will need to run this function inside your AJAX call and change the code accordingly to use the data returned from the call as opposed to objArray.

Also - be aware that the variables used are global in scope - and there are associated risks!

Does this do what you wanted? – jonhendrix Aug 23 '17 at 07:03 — jonhendrix, Aug 23 '17 at 07:03

Jquery autocomplete fill in another field when selected

1 Answers1