Autocompletion dans une table

**oitsuki** · 25/03/2018, 16h09

Bonjour,

J'arrive pas à resoudre cette, J'utilise la librairie token-input et je souhaite mettre à l'intéreiru d'un table créé en js (ajout d'une ligne) champs permettant l'autocompletion.
Le code cide ssous devrait fonctionner et ce n'est pas le cas et j'arrive pas à trouver la solution; La console n'indique absolument aucune action avec le id.

Mes connaissances sont limité en js et j'aurais aimé savoir si vous pouvez me donner un petit coup de main.

Merci

version HTML

note :specification_row est un incrément issue du nombre de ligne dans la table
look `$(document).ready(function()` and `id="specificationName' + specification_row + '"` sont identique mais ne fonctionne pas

Table script js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 <script type="text/javascript"><!--
      var specification_row = 3;
 
        $(document).ready(function() {
        $("#specificationName' + specification_row + '").tokenInput("http://....../products_specification_ajax.php" ,
            {
              tokenLimit: 1,
              resultsLimit: 5,
              onResult: function (results) {
                $.each(results, function (index, value) {
                  value.name = value.id + " " + value.name;
                });
                return results;
              }
            });
      });
 
 
      function addSpecificationValue() {
       html  = '<tr id="specification-row' + specification_row + '">';
 
    //specification_name
       html += '<td>';
       html += '  <input type="text" name="products_specification[' + specification_row + '][name]" value="" id="specificationName' + specification_row + '" class="form-control token-input" />';
       html += '  <input type="hidden" name="product_specification[' + specification_row + '][specification_id]" value="" />';
       html += '</td>';
 
    //remove    
        html += '  <td class="text-md-right"><button type="button" onclick="$(\'#specification-row' + specification_row + '\').remove();" data-toggle="tooltip" title="Remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
        html += '</tr>';
 
        $('#specification tbody').append(html);
 
        specification_row++;
    }

Mon code en php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
 
 
            $content .= '<tr id="specification-row' . $t . '">';
// Mon autocompletion (fonctionne)
            $content .= '  <td>' . HTML::inputField('products_specification[' . $t . '][name]', $specification_name, 'class="form-control token-input" id="specificationName' . $t . '"', null, null, null);
    </td>';
              $content .= ' </tr
>';
//ajout d'une nouvelle ligne
              $content .= '    </tbody>
                                  <tfoot>
                                    <tr>
                                      <td colspan="5"></td>
                                      <td class="text-md-right"><button type="button" onclick="addSpecificationValue();" data-toggle="tooltip" title="' . $this->app->getDef('button_add') . '" class="btn btn-primary"><i class="fas fa-plus-circle"></i></button></td>                             
                                    </tr>
                                  </tfoot>
                                </table></td>
                              </tr>
                            </table>
                     ';
 
 
 
 
     $products_specification_ajax = OSCOM::link('products_specification_ajax.php');
 
              $output = <<<EOD
            <script type="text/javascript"><!--
    
    
              var specification_row = $t; // increment element 
    // call token-input js for autocompletion : data list
    
    
    
                $(document).ready(function() {
                $("#specificationName' + specification_row + '").tokenInput("{$products_specification_ajax}" ,
                    {
                      tokenLimit: 1,
                      resultsLimit: 5,
                      onResult: function (results) {
                        $.each(results, function (index, value) {
                          value.name = value.id + " " + value.name;
                        });
                        return results;
                      }
                    });
              });
    
  Création de la nouvelle ligne en js 
    
              function addSpecificationValue() {
               html  = '<tr id="specification-row' + specification_row + '">';
    
               html += '<td>';
    
// input autocompketion 
               html += '  <input type="text" name="products_specification[' + specification_row + '][name]" value="" id="specificationName' + specification_row + '" class="form-control token-input" />';
    
    
               html += '  <input type="hidden" name="product_specification[' + specification_row + '][specification_id]" value="" />';
               html += '</td>';  
 //remove    
                html += '  <td class="text-md-right"><button type="button" onclick="$(\'#specification-row' + specification_row + '\').remove();" data-toggle="tooltip" title="Remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
                html += '</tr>';
    
                $('#specification tbody').append(html);
    
                specification_row++;
            }
            </script>
        EOD;

**Toufik83** · 26/03/2018, 17h56

bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#specificationName' + specification_row + '").tokenInput(...) //fausse initialitation ici

ça devrait être

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#specificationName" + specification_row).tokenInput(...)

**oitsuki** · 26/03/2018, 18h05

@Toufik83

Merci pour l'information, j'ai testé et dans cadre, je n'ai plus d'erreur dans la console.
Toutefois, je ne vois toujours pas lareqsuete s'exécuter.

Dois je rajouter quelques chose ici du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	attributeautocomplete(specification_row);	attributeautocomplete(specification_row);

après

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

specification_row++;

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
        $("#specificationName' + specification_row + '").tokenInput("http://....../products_specification_ajax.php" ,
            {
              tokenLimit: 1,
              resultsLimit: 5,
              onResult: function (results) {
                $.each(results, function (index, value) {
                  value.name = value.id + " " + value.name;
                });
                return results;
              }
            });
      });

deviendrait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(attributeautocomplete) {
        $("#specificationName' + specification_row + '").tokenInput("http://....../products_specification_ajax.php" ,
            {
              tokenLimit: 1,
              resultsLimit: 5,
              onResult: function (results) {
                $.each(results, function (index, value) {
                  value.name = value.id + " " + value.name;
                });
                return results;
              }
            });
      });

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function attributeautocomplete(specification_row) {
 $('input[name=\'products_specification[' + specification_row + '][name]\']').tokenInput("{$products_specification_ajax}");
		'source': function(request, response) {
			$.ajax({
				url: '{$products_specification_ajax},
				  tokenLimit: 1,
      resultsLimit: 5,
				success: function(json) {
					response($.map(json, function(item) {
						return {
							category: item.attribute_group,
							label: item.name,
							value: item.attribute_id
						}
					}));
				}
			});
		},
		'select': function(item) {
			$('input[name=\'products_specification[' + specification_row + '][name]\']').val(item['label']);
			$('input[name=\'products_specification[' + specification_row + '][specification_id]\']').val(item['value']);
		}
	});
}
 
$('#specification tbody tr').each(function(index, element) {
	attributeautocomplete(index);
});

je en sais pas comment exactement faire.

Autocompletion dans une table

jQuery

Discussions similaires

Partager

Partager