选中时，jQuery自动完成填充另一个字段

Question

我正在构建一个包含多个输入字段的表单。我目前使用远程 JSON 响应进行自动完成。我想要它，所以当我单击产品名称时，它会为我填写剩余的产品信息，例如描述和价格。文本输入 id 是描述和价格。我怎样才能完成这个？我现在有以下 javascript 代码，它适用于产品名称。

Javascript 文件：

$( 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 响应示例：

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

HTML 部分：

<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>

Answer 1

这是一个有效的 jsfiddle：https://jsfiddle.net/jonolayton/4Le0ugka/

这就是我所做的：

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]);
}

它并不漂亮，但它确实有效......我相信很多人都可以改进它......

我正在使用 document.ready 块，但显然您需要在 AJAX 调用中运行此函数并相应地更改代码以使用从调用返回的数据，而不是使用 objArray。

另外 - 请注意，使用的变量在范围内是全局的 - and there are associated risks！