Autouzupełnianie w wielu polach na raz

0

Witam. Mam problen ze skryptem w JS. Jest to autouzupelnianie. Nie ma problemu jesli jest jedno pole ale kiedy potrzebuje wygenerowac tablice pól w php w pętli efekt jest taki ze tylko ostatnie pole "działa". Zapewne jest to spowodowane tym iż osadzam caly ten skrypt w pętli i funkcja sie nadpisuje wiec zadziala tylko ostatnie pole.

Pętla generuje pola text które docelowo chce aby kazde działało czyli autouzupelnienie wyswietlalo w kazdym polu podpowiedzi. Niestety teraz tylko ostatnie pole dziala

Pytanie jest czy moglby ktos to poprawic zeby zadziałalo bo ja sam nie znam JS i probowalem na rozne sposoby ale nic nie chce dzialac

<html>
<head>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
    <style>
        p, div, input {
            font: 16px Calibri;
        }
        .ui-autocomplete { 
            cursor:pointer; 
            height:120px; 
            overflow-y:scroll;
        }    
    </style>
</head>
<body>
 
</body>
 
<?php
        for($i=0;$i<=5;$i++)
 
			{
 
				echo "<input type=\"text\" id=\"tbCountries$i\" /><br>";
 
 
?>
<script>
    $(document).ready(function() {
        BindControls();
    });
 
    function BindControls() {
        var Countries = ['ARGENTINA', 
            'AUSTRALIA', 
            'BRAZIL', 
            'BELARUS', 
            'BHUTAN',
            'CHILE', 
            'CAMBODIA', 
            'CANADA', 
            'DENMARK', 
            'DOMINICA',
            'INDIA'];
 
        $('#tbCountries<?=$i;?>').autocomplete({
            source: Countries,
            minLength: 0,
            scroll: true
        }).focus(function() {
            $(this).autocomplete("search", "");
        });
    }
</script>
</html>
 
<?php
 
			}
 
			?>

0

Wydaje mi się (ale jQuery nie znam) że sekcje:

$('#tbCountries<?=$i;?>').autocomplete({
    source: Countries,
    minLength: 0,
    scroll: true
}).focus(function() {
    $(this).autocomplete("search", "");
});

też powinieneś przepuścić przez pętle bo w tej chwili przyjmuje tylko identyfikator do ostatniej iteracji $i. Jeśli wygenerujesz dla każdej iteracji tą definicje to powinno zadziałać.

1

echo "<input type=\"text\" id=\"tbCountries$i\" class='moja_klasa'/><br>";

oraz

$('.moja_klasa').autocomplete({
    source: Countries,
    minLength: 0,
    scroll: true
}).focus(function() {
    $(this).autocomplete("search", "");
});

0

coolock napisał(a):

Dziekuje za chęć pomocy ale nie jestem w stanie ooradzic sobie z tym sam. Nie wiem co to konsola i gdzie tego szukac

Otwórz stronę w przeglądarce, i zrób dwie rzeczy.

Po pierwsze, klikniij prawym klawiszem, wybierz "Pokaż źródło strony", i wklej tutaj na forum to co tam widzisz.
Po drugie, kliknij na stronie prawym klawisze, i wybierz "Zbadaj elemenet" albo "Inspeckcja". Pokaże Ci się drzewo HTML, i w pasku zakładek zobaczysz zakładkę "Konsola". Zobacz czy jest tam cos na czerwono, najlepiej gdybyś też wkleił, jeśli coś tam znajdziesz.

0

W konsoli pod menu ELEMENT sa tylko tagi html a w CONSOLE nie ma nic.

Nic nie dała zmiana z ID na klase bo i tak tylko ostatnie pole text działa tj. wyswietlaja się nazwy państw

To skrypt:

<html>
<head>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
    <style>
        p, div, input {
            font: 16px Calibri;
        }
        .ui-autocomplete { 
            cursor:pointer; 
            height:120px; 
            overflow-y:scroll;
        }    
    </style>
</head>
<body>
 
</body>
 
<?php
        for($i=0;$i<=5;$i++)
 
			{
 
				echo "<input type=\"text\"  class=klasa$i/><br>";
 
 
?>
<script>
    $(document).ready(function() {
        BindControls();
    });
 
    function BindControls() {
        var Countries = ['ARGENTINA', 
            'AUSTRALIA', 
            'BRAZIL', 
            'BELARUS', 
            'BHUTAN',
            'CHILE', 
            'CAMBODIA', 
            'CANADA', 
            'DENMARK', 
            'DOMINICA',
            'INDIA'];
 
        $('.klasa<?=$i;?>').autocomplete({
            source: Countries,
            minLength: 0,
            scroll: true
        }).focus(function() {
            $(this).autocomplete("search", "");
        });
    }
</script>
</html>
 
<?php
 
			}
 
			?>

Zrodlo strony

<html>
<head>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
    <style>
        p, div, input {
            font: 16px Calibri;
        }
        .ui-autocomplete { 
            cursor:pointer; 
            height:120px; 
            overflow-y:scroll;
        }    
    </style>
</head>
<body>
 
</body>
 
<input type="text"  class=\'klasa0\'/><br><script>
    $(document).ready(function() {
        BindControls();
    });
 
    function BindControls() {
        var Countries = ['ARGENTINA', 
            'AUSTRALIA', 
            'BRAZIL', 
            'BELARUS', 
            'BHUTAN',
            'CHILE', 
            'CAMBODIA', 
            'CANADA', 
            'DENMARK', 
            'DOMINICA',
            'INDIA'];
 
        $('.klasa0').autocomplete({
            source: Countries,
            minLength: 0,
            scroll: true
        }).focus(function() {
            $(this).autocomplete("search", "");
        });
    }
</script>
</html>
 
<input type="text"  class=\'klasa1\'/><br><script>
    $(document).ready(function() {
        BindControls();
    });
 
    function BindControls() {
        var Countries = ['ARGENTINA', 
            'AUSTRALIA', 
            'BRAZIL', 
            'BELARUS', 
            'BHUTAN',
            'CHILE', 
            'CAMBODIA', 
            'CANADA', 
            'DENMARK', 
            'DOMINICA',
            'INDIA'];
 
        $('.klasa1').autocomplete({
            source: Countries,
            minLength: 0,
            scroll: true
        }).focus(function() {
            $(this).autocomplete("search", "");
        });
    }
</script>
</html>
 
<input type="text"  class=\'klasa2\'/><br><script>
    $(document).ready(function() {
        BindControls();
    });
 
    function BindControls() {
        var Countries = ['ARGENTINA', 
            'AUSTRALIA', 
            'BRAZIL', 
            'BELARUS', 
            'BHUTAN',
            'CHILE', 
            'CAMBODIA', 
            'CANADA', 
            'DENMARK', 
            'DOMINICA',
            'INDIA'];
 
        $('.klasa2').autocomplete({
            source: Countries,
            minLength: 0,
            scroll: true
        }).focus(function() {
            $(this).autocomplete("search", "");
        });
    }
</script>
</html>
 
<input type="text"  class=\'klasa3\'/><br><script>
    $(document).ready(function() {
        BindControls();
    });
 
    function BindControls() {
        var Countries = ['ARGENTINA', 
            'AUSTRALIA', 
            'BRAZIL', 
            'BELARUS', 
            'BHUTAN',
            'CHILE', 
            'CAMBODIA', 
            'CANADA', 
            'DENMARK', 
            'DOMINICA',
            'INDIA'];
 
        $('.klasa3').autocomplete({
            source: Countries,
            minLength: 0,
            scroll: true
        }).focus(function() {
            $(this).autocomplete("search", "");
        });
    }
</script>
</html>
 
<input type="text"  class=\'klasa4\'/><br><script>
    $(document).ready(function() {
        BindControls();
    });
 
    function BindControls() {
        var Countries = ['ARGENTINA', 
            'AUSTRALIA', 
            'BRAZIL', 
            'BELARUS', 
            'BHUTAN',
            'CHILE', 
            'CAMBODIA', 
            'CANADA', 
            'DENMARK', 
            'DOMINICA',
            'INDIA'];
 
        $('.klasa4').autocomplete({
            source: Countries,
            minLength: 0,
            scroll: true
        }).focus(function() {
            $(this).autocomplete("search", "");
        });
    }
</script>
</html>
 
<input type="text"  class=\'klasa5\'/><br><script>
    $(document).ready(function() {
        BindControls();
    });
 
    function BindControls() {
        var Countries = ['ARGENTINA', 
            'AUSTRALIA', 
            'BRAZIL', 
            'BELARUS', 
            'BHUTAN',
            'CHILE', 
            'CAMBODIA', 
            'CANADA', 
            'DENMARK', 
            'DOMINICA',
            'INDIA'];
 
        $('.klasa5').autocomplete({
            source: Countries,
            minLength: 0,
            scroll: true
        }).focus(function() {
            $(this).autocomplete("search", "");
        });
    }
</script>
</html>

0

Zrób dupa-debugging:

<script>
    $(document).ready(function() {
        console.log("calling BindControls()"); // <-- tutaj
        BindControls();
    });
    console.log("defining BindControls() with i = <?=$i;?>"); // <-- i tutaj
    function BindControls() {
        var Countries = ['ARGENTINA', 
            'AUSTRALIA', 
            'BRAZIL', 
            'BELARUS', 
            'BHUTAN',
            'CHILE', 
            'CAMBODIA', 
            'CANADA', 
            'DENMARK', 
            'DOMINICA',
            'INDIA'];
 
        $('.klasa<?=$i;?>').autocomplete({
            source: Countries,
            minLength: 0,
            scroll: true
        }).focus(function() {
            $(this).autocomplete("search", "");
        });
    }
</script>

I powinieneś zrozumieć, że kolejne definicje BindControls nadpisują te poprzednie, a callback z $(document).ready(...) odpala się dopiero po załadowaniu wszystkich skryptów, więc w każdej iteracji "przykrywasz" poprzednie BindControls nową funkcją.

0

coolock napisał(a):

W konsoli pod menu ELEMENT sa tylko tagi html a w CONSOLE nie ma nic.

Nic nie dała zmiana z ID na klase bo i tak tylko ostatnie pole text działa tj. wyswietlaja się nazwy państw

Źle przepisałeś kod.

Bo to nie chodziło po prostu żeby użyć class zamiast id, tylko żeby łapać jednym identyfikatorem wszystkie elementy UI. Ty próbujesz je złapać każde osobno. Pokazałem Ci kod który by zadziałał, z class="autocomplete" ale przerobiłeś go i dodałeś do niego $i.

jQuery działa tak, żę jak masz 10 elementów o klasie tbCountries i zrobisz $(".tbCountries").autocomplete() to ten plugin się załapie do każdego elementu który ma taką klasę. Nie musisz po nich iterować i łapać po id.

Zrób dokładnie tak:

<html>
<head>
  <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

  <style>
      p, div, input {
          font: 16px Calibri;
      }
      .ui-autocomplete { 
          cursor:pointer; 
          height:120px; 
          overflow-y:scroll;
      }    
  </style>
</head>
<body>
  <?php
  for($i=0; $i<=5; $i++) {
    echo '<input type="text" class="tbCountries" /><br>' . PHP_EOL;
  }
  ?>
  <script>
    $(document).ready(function() {
        BindControls();
    });
  
    function BindControls() {
      var Countries = ['ARGENTINA', 
          'AUSTRALIA', 
          'BRAZIL', 
          'BELARUS', 
          'BHUTAN',
          'CHILE', 
          'CAMBODIA', 
          'CANADA', 
          'DENMARK', 
          'DOMINICA',
          'INDIA'];
  
      $('.tbCountries').autocomplete({
          source: Countries,
          minLength: 0,
          scroll: true
      }).focus(function() {
          $(this).autocomplete("search", "");
      });
    }
  </script>
</body>

0

coolock napisał(a):

Niestety to tez nie działa. Nic się nie wyswietla a w konsoli jest na czerwono:
php(index):2 Uncaught ReferenceError: $ is not defined
    at (index):2:3
(anonymous) @ (index):2

Usunąłeś sobie jQuery?

PS, myślałem że się domyślisz żeby nie usuwać <html>, <head> i <body>. Tutaj jest cały kod

Edit: Dopisałem do postu wyżej brakujące linki. @coolock Skopiuj go jeszcze raz.

Autouzupełnianie w wielu polach na raz

coolock napisał(a):

coolock napisał(a):

coolock napisał(a):

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami