Question

我有一个非常基本的html与jQuery和jQuery UI，我正在使用自动完成功能，到目前为止一直很好，问题是我有一个数组有3个值，每个块有类似的东西：

Array
(
    [0] => stdClass Object
        (
            [product_id] => 5
            [product_number] => AGD-ACRBD001
            [product_name] => Title 1 
        )

    [1] => stdClass Object
        (
            [product_id] => 6
            [product_number] => AGD-ACRBD002
            [product_name] => Title 6
        )

    [2] => stdClass Object
        (
            [product_id] => 7
            [product_number] => AGD-ACRBD003
            [product_name] => Title 34
        )
)

这就是我的数组，使用该数组我只需要[product_number]为自动完成构建我的数组，这不是问题，问题是如何在[product_number]时使用其他值已被选中？... HTML如下：

<form>
     <input type="text" id="ids" name="ids" placeholder="Product ID">
     <input type="text" id="codes" name="codes" placeholder="Code">
     <input type="text" id="names" name="names" placeholder="Names">
</form>

因此，当用户在id =“codes”上输入内容时，它会显示从数组值[product_number]中提取的代码列表，这是有效的......我不知道的是如何添加值从列表中选择后，id =“ids”和id =“names”...自动完成的jQuery是：

(function($) {
        $(function() {
            var availableTags = [
                "AGD-ACRBD001",
                "AGD-ACRBD002",
                "AGD-ACRBD003"
            ];
            $("#codes").autocomplete({
                source: availableTags
            });
        });
    })(jQuery);

Answer 1

使用它。可能对你有所帮助。我给了（product_id）搜索

    <script>
         var availableTags = [
                "AGD-ACRBD001",
                "AGD-ACRBD002",
                "AGD-ACRBD003"
            ];
$(function(){
 $("#but").click(function(){
    var pr_code=$("#ids").val();
   // addToTags(pr_code);
     availableTags.push(pr_code);
 });


    $("#codes").autocomplete({
                source: availableTags
            });
});

    </script>

     <input type="text" id="ids" name="ids" placeholder="Product ID">
     <input type="text" id="codes" name="codes" placeholder="Code">
     <input type="text" id="names" name="names" placeholder="Names">
    <input type="button" id="but" value="create"/>

Click the Demo

Answer 2

我有一个解决方案，可以用于多个值和多个输入以及多维数组...
首先我们需要相应地建立arrray，在这种情况下，我将使用相同的阵列

Array
(
    [0] => stdClass Object
        (
            [product_id] => 5
            [product_number] => AGD-ACRBD001
            [product_name] => Title 1 
        )

    [1] => stdClass Object
        (
            [product_id] => 6
            [product_number] => AGD-ACRBD002
            [product_name] => Title 6
        )

    [2] => stdClass Object
        (
            [product_id] => 7
            [product_number] => AGD-ACRBD003
            [product_name] => Title 34
        )
)
// now lets make the json since this array is just a regular array
$bar = '';
foreach($arr as $k) {
   $bar .= '{value: $k->product_id, label: $k->product_number, description: $k->product_name},';
}
// lets trim the last " , "
$ls = substr($bars, 0, -1);
// done this now that we have our "manually build" json lets get down to the js and html
// I know I could use $ls=json_encode($arr);

现在是jquery

(function($) {
        $(function() {
            $("#skus").autocomplete({
                source: [
                    <?php echo $ls; ?>
                ],
                select: function(event, ui) {
                    var w = ui.item;
                    event.preventDefault();
                    $("#skus").val(w.label);
                    this.value = w.label;
                    $("#ids").val(w.value);
                    $("#names").val(w.description);
                }
            });
        });
    })(jQuery);

现在是HTML

<form class="myCoolForm">
   <input id="skus" class="inp" type="text">
   <input id="ids" class="inp" type="text">
   <input id="names" class="inp" type="text">
</form>

我们完成了！这是最终结果：http://jsfiddle.net/xeLuma72/1/

jQuery自动完成，3个值或更多

2 个答案: