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

Posted 2023-05-08

【中文标题】选中时，jQuery自动完成填充另一个字段

【英文标题】：Jquery autocomplete fill in another field when selected

【发布时间】：2018-01-31 04:08:49

【问题描述】：

我正在构建一个包含多个输入字段的表单。我目前使用远程 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>

【问题讨论】：

能否请您张贴html表单？

刚刚添加了我希望在选择产品名称时影响的 html 部分。

【参考方案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！

【讨论】：

这是你想要的吗？