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！

选中时，Jquery自动填充会填写另一个字段

1 个答案: