Two dimensional array and autocomplete

Question

I would like to make a form with list of products.

When the user starts typing the product name, autocomplete should show the available options by name (first array element).

When the user chooses a product, the second form control should display a price (second array element).

Here is my code:

HTML:

Product name:
<textarea class="form-control" id="product_name" name="product_name" rows="1" cols="70" placeholder="" type="text" required></textarea>
<br>
Product price:
<textarea class="form-control" id="product_price" name="product_price" rows="1" cols="70" placeholder="" type="text" required>
</textarea>

JS:

$(function() {
    var tagi = [
        ["product_name_1", "10"],
        ["produc_name_2", "20"],
        ["produc_name_3", "20"],
    ];
    $( "#product_name, #product_price" ).autocomplete({
        source: tagi[0,1]
    });
});

...and js fiddle: http://jsfiddle.net/dNLQa/159/

I am trying get this to work but I am stuck.

PS. The array will be generated by PHP, so if this needs to be in a different format I can do that easily.

There are no multidimensional arrays in Javascript. There are nested arrays, which is something different. The notation tagi[0, 1] does not make sense. — Tomalak
– Tomalak, Commented Nov 10, 2017 at 15:13
ok, thank you for clarification. Could you be so kind to help me and explain how can I call first element od arrays? — Tikky
– Tikky, Commented Nov 10, 2017 at 15:16
You can't, not like this at least. I suggest a different array layout - an array of objects ([ {name: "product_name_1", price: "10"}, {name: "product_name_2", price: "20"}, {name: "product_name_3", price: "30"} ]). jQuery autocomplete supports displaying a certain property from the objects in an array. — Tomalak
– Tomalak, Commented Nov 10, 2017 at 15:21
@Tomalak ok, so the array like: jsfiddle.net/dNLQa/165 And how can I call the elements to make a list? — Tikky
– Tikky, Commented Nov 10, 2017 at 16:13
By calling Array#map to extract the relevant property, just like Davide's answer shows. jsfiddle.net/dNLQa/166. — Tomalak
– Tomalak, Commented Nov 10, 2017 at 16:35

Davide Perozzi · Accepted Answer · 2017-11-10 15:20:32Z

2

I hope I understood your problem correctly. If so, you could search for the product if the user selected one from the autocomplete.

Forked fiddle: http://jsfiddle.net/vnxa2b09/4/

$(function () {
  function setPriceByProduct(prod, values) {
    for (var i = 0, len = values.length; i < len; i++) {
      if (values[i][0] == prod) {
        $('#product_price').val(values[i][1]);
        break;
      }
    }
  }

  var tagi = [
    ["product_name_1", "10"],
    ["produc_name_2", "20"],
    ["produc_name_3", "20"],
  ];

  $("#product_name, #product_price").autocomplete({
    source: tagi.map(function(val){return val[0]}),
    select: function (event, ui) {
      setPriceByProduct(ui.item.value, tagi);
    }
  });
});

edited Nov 10, 2017 at 15:20

answered Nov 10, 2017 at 15:02

Davide Perozzi

3862 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tikky Over a year ago

partially working, but in your jfiddle when I am trying to start typing product name I have only one option to choose from (one product) instead of three

Davide Perozzi Over a year ago

@Tikky Updated the fiddle. You need to pass all values as a flat array to the source property. I archived it by mapping them to a new array.

artgb Over a year ago

@DavidePerozzi, in your fiddle, product_price can have product_name value.

Tikky Over a year ago

@DavidePerozzi - awesome, thank you. Artgb - thank you, your solution works also

artgb · Accepted Answer · 2017-11-10 15:27:28Z

You can separately call autocomplete and when select product, you can forcefully change price field. FIDDLE

$( function() {
    function setPriceByProduct(prod, values) {
    for (var i = 0, len = values.length; i < len; i++) {
      console.log(values[i][0])
        if (values[i][0] == prod) {
        $('#product_price').val(values[i][1]);
        break;
      }
    }
  }

    var tagi = {
      "product_name_1": "10",
      "product_name_2":"20",
      "product_name_3" : "20"
    };
  tagi1 = Object.keys(tagi);
  var tagi2 = Object.values(tagi);

    $( "#product_name" ).autocomplete({
      source: tagi1,
    select: function(event, ui){
       $('#product_price').val(tagi[ui.item.value]);
    }
    });
    $( "#product_price" ).autocomplete({
      source: tagi2
    });
});

Collectives™ on Stack Overflow

Two dimensional array and autocomplete

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related