[JS]Autofill + automatyczne dodawanie inputów Opcje

[lulia]

Witam. Próbuje ogarnąć jak dodać autofill'a do kodu dodającego inputy. Oddzielnie oba kody działają,razem już nie

[HTML] pobierz, plaintext 
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<div class="col-md-6">
 
<label for="autocomplete" class="field prepend-icon">
                        <input class="autocomplete gui-input" type="text" name="autocomplete" placeholder="Wybierz urządzenie *"  >
 
                        <label for="autocomplete" class="field-icon"><i class="fa fa-file-text-o"></i></label>
                      </label>
 
</div>
<div class="col-md-4"><label class="field select" >
                        <select id="typnaprawy" name='nastepny_status'>
                          <option value="">Status *</option>
 
 
 
                        </select><i class="arrow double"></i>
                      </label></div>
<div class="col-md-2"><label for="autocomplete" class="field prepend-icon">
                        <input id="autocomplete" type="text" name="autocomplete" placeholder="Wybierz urządzenie *" class="gui-input" >
 
                        <label for="autocomplete" class="field-icon"><i class="fa fa-file-text-o"></i></label>
                      </label>
</div>
 
</div>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<script src="{{ asset('/jquery-ui.js') }}"></script>
 
     <script type="text/javascript">
         var availableTags = {{ urzadzenia|json_encode|raw }};
$( "#autocomplete" ).autocomplete({
	source: availableTags
});
 
 
$( "#menu" ).menu();
 
 
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
	function() {
		$( this ).addClass( "ui-state-hover" );
	},
	function() {
		$( this ).removeClass( "ui-state-hover" );
	}
);
   $(document).ready(function () {
var counter = 2;
 
$("#addButton").click(function () {
           if (counter > 10) {
               alert("Only 2 textboxes allowed");
               return false;
           }
           $('<div/>',{'id':'TextBoxDiv' + counter}).html(
             $('<label/>').html(  )
           )
           .append( $('<div class="col-md-6" ><label for="autocomplete" class="field prepend-icon"><input id="autocomplete" type="text" class="autocomplete" name="autocomplete" placeholder="Wybierz urządzenie *" ><label for="autocomplete" class="field-icon"><i class="fa fa-file-text-o"></i></label></label></div>').attr({'id':'textbox' + counter,'name':'textbox' + counter }) )
           .appendTo( '#TextBoxesGroup' )
           .append( $('<div class="col-md-4"><label class="field select" ><select id="typnaprawy" name="nastepny_status"><option value="">Status *</option></select><i class="arrow double"></i></label></div>').attr({'id':'textbox' + counter,'name':'textbox' + counter}) )
           .appendTo( '#TextBoxesGroup' )
           .append( $('<div class="col-md-2"><input name="te2[]" class="gui-input" type="text"></div>').attr({'id':'textbox' + counter,'name':'textbox' + counter}) )
           .appendTo( '#TextBoxesGroup' )
           counter++;
       });
 
       $("#removeButton").click(function () {
           if (counter == 1) {
               alert("No more textbox to remove");
               return false;
           }
           counter--;
           $("#TextBoxDiv" + counter).remove();
       });
});
 
 
    </script>
[HTML] pobierz, plaintext 

[aras785]

Cześć.

Sporo bałaganu w tym kodzie...
Poprawiłem lekko Twój kod i działa teraz poprawnie:

HTML (różnice: https://www.diffchecker.com/0HQuzL1i)

[HTML] pobierz, plaintext 
<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <div class="col-md-6">
 
            <label for="autocomplete" class="field prepend-icon">
                <input class="autocomplete gui-input" type="text" name="autocomplete" placeholder="Wybierz urządzenie *">
 
                <label for="autocomplete" class="field-icon"><i class="fa fa-file-text-o"></i>
                </label>
            </label>
 
        </div>
        <div class="col-md-4">
            <label class="field select">
                <select id="typnaprawy" name='nastepny_status'>
                    <option value="">Status *</option>
 
 
 
                </select><i class="arrow double"></i>
            </label>
        </div>
        <div class="col-md-2">
            <label for="autocomplete" class="field prepend-icon">
                <input id="autocomplete" type="text" name="autocomplete" placeholder="Wybierz urządzenie *" class="gui-input autocomplete">
 
                <label for="autocomplete" class="field-icon"><i class="fa fa-file-text-o"></i>
                </label>
            </label>
        </div>
 
    </div>
</div>
[HTML] pobierz, plaintext 

JS (różnice: https://www.diffchecker.com/CmZxahmZ )

[HTML] pobierz, plaintext 
<script src="{{ asset('/jquery-ui.js') }}"></script>
 
<script type="text/javascript">
    var availableTags = {
        {
            urzadzenia | json_encode | raw
        }
    };
    $(".autocomplete").autocomplete({
        source: availableTags
    });
 
 
    $("#menu").menu();
 
 
    // Hover states on the static widgets
    $("#dialog-link, #icons li").hover(
        function() {
            $(this).addClass("ui-state-hover");
        },
        function() {
            $(this).removeClass("ui-state-hover");
        }
    );
    $(document).ready(function() {
        var counter = 2;
 
        $("#addButton").click(function() {
            if (counter > 10) {
                alert("Only 2 textboxes allowed");
                return false;
            }
            $('<div/>', {
                    'id': 'TextBoxDiv' + counter
                }).html(
                    $('<label/>').html()
                )
                .append($('<div class="col-md-6" ><label for="autocomplete" class="field prepend-icon"><input id="autocomplete" type="text" class="autocomplete" name="autocomplete" placeholder="Wybierz urządzenie *" ><label for="autocomplete" class="field-icon"><i class="fa fa-file-text-o"></i></label></label></div>').attr({
                    'id': 'textbox' + counter,
                    'name': 'textbox' + counter
                }))
                .appendTo('#TextBoxesGroup')
                .append($('<div class="col-md-4"><label class="field select" ><select id="typnaprawy" name="nastepny_status"><option value="">Status *</option></select><i class="arrow double"></i></label></div>').attr({
                    'id': 'textbox' + counter,
                    'name': 'textbox' + counter
                }))
                .appendTo('#TextBoxesGroup')
                .append($('<div class="col-md-2"><input name="te2[]" class="gui-input autocomplete" type="text"></div>').attr({
                    'id': 'textbox' + counter,
                    'name': 'textbox' + counter
                }))
                .appendTo('#TextBoxesGroup')
            counter++;
            $(".autocomplete").autocomplete({
                source: availableTags
            });
        });
 
        $("#removeButton").click(function() {
            if (counter == 1) {
                alert("No more textbox to remove");
                return false;
            }
            counter--;
            $("#TextBoxDiv" + counter).remove();
        });
    });
</script>
[HTML] pobierz, plaintext 

Pozdrawiam

Ten post edytował aras785 24.07.2017, 10:24:45