Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Skrypt autocomplete przypisany do dynamicznie dodawanych inputów
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
d0m1n1k_
2.09.2015, 17:37:16
Witam,
na wstępie - starałem się szukać ale nie wiem nawet jak sformułować dobre zapytanie.

Chcę wykorzystać ten skrypt do dodawania składników do przepisów.
Zasady jakie mnie interesują to: dynamiczne dodawanie inputów (start od jednego), autocomplete z bazy danych z opisem w dwóch językach oraz zblokowanie aby można było dodać tylko jeden składnik do jednego inputa.

Skrypt:
[PHP] pobierz, plaintext 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI Autocomplete - Custom data and display</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  8.   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="/resources/demos/style.css">
  10.   <style>
  11.   #project-label {
  12.     display: block;
  13.     font-weight: bold;
  14.     margin-bottom: 1em;
  15.   }
  16.   #project-description {
  17.     margin: 0;
  18.     padding: 0;
  19.   }
  20.   </style>
  21.   <script>
  22.   $(function() {
  23.     var projects = [
  24.       {
  25.         value: "jquery",
  26.         label: "jQuery",
  27.         desc: "the write less, do more, JavaScript library"
  28.       },
  29.       {
  30.         value: "jquery-ui",
  31.         label: "jQuery UI",
  32.         desc: "the official user interface library for jQuery"
  33.       },
  34.       {
  35.         value: "sizzlejs",
  36.         label: "Sizzle JS",
  37.         desc: "a pure-JavaScript CSS selector engine"
  38.       }
  39.     ];
  40.  
  41.     $( "#project" ).autocomplete({
  42.       minLength: 0,
  43.       source: projects,
  44.       focus: function( event, ui ) {
  45.         $( "#project" ).val( ui.item.label );
  46.         return false;
  47.       },
  48.       select: function( event, ui ) {
  49.         $( "#project" ).val( ui.item.label );
  50.         $( "#project-id" ).val( ui.item.value );
  51.         $( "#project-description" ).html( ui.item.desc );
  52.         $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
  53.  
  54.         return false;
  55.       }
  56.     })
  57.     .autocomplete( "instance" )._renderItem = function( ul, item ) {
  58.       return $( "<li>" )
  59.         .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
  60.         .appendTo( ul );
  61.     };
  62.   });
  63.   </script>
  64. </head>
  65. <body>
  66.  
  67. <input id="project">
  68. <input type="hidden" id="project-id">
  69. <p id="project-description"></p>
  70.  
  71. </body>
  72. </html>
[PHP] pobierz, plaintext


Moje główne pytanie brzmi: Jak mogę spowodować aby #project był dynamiczny - pasował do inputów z id: project1, project2... project999
Jak pobierać dane z bazy do skryptu mnie więcej wiem, więc to nie jest problem.
Kwestię dynamicznego dodawania inputów rozwiązałem następująco:

[PHP] pobierz, plaintext 
  1. <script>
  2. var z = 2;
  3. $(document).ready (function() { 
  4. 	$('input[name="dodajskladnik"]').click (function(){ 
  5. 		$('#project').append ("<inputy id=\"project"+(z)+"\" name=\"project"+(z)+"\".... />");
  6. 		z++;
  7. 	}); 
  8. }); 
  9. </script>
[PHP] pobierz, plaintext


Z góry dziękuję za pomoc
Comandeer
2.09.2015, 17:40:52
AFAIR jQuery UI i tego typu działania nie lubią się wink.gif

Trza by wykrywać wstawienie nowych elementów i wówczas dla nich odpalać dodanie autocomplete. Najbardziej prymitywne, ale też zawsze działające rozwiązanie. W Twoim wypadku najlepiej zmodyfikować ten dodający click, żeby od razu dołączać autocomplete do inputa.
d0m1n1k_
2.09.2015, 20:37:13
Nic nie zrozumiałem :-/
Ja w tych tematach jestem całkowicie zielony.
Niema możliwości podstawienia czegoś podobnego do z-tki "+(z)+" pod id #project ?

Zminimalizowałem kod autocomplete do minimum, ale gryzie się - a raczej nie działa - z dynamicznym dodawaniem inputów.

Nowy AutoComplete:

[PHP] pobierz, plaintext 
  1. <script type='text/javascript'>//<![CDATA[
  2. window.onload=function(){
  3. <?php
  4. echo "	var tags = [	";
  5. $pobierz_zbazy = mysql_query("SELECT * FROM `skladniki`");
  6. $i = 1;
  7. $ilosc_zbazy = mysql_fetch_array(mysql_query("SELECT COUNT(`skl_id`) AS ccc FROM `skladniki`"));
  8. while($pz = mysql_fetch_array($pobierz_zbazy)){
  9. 	if($ilosc_zbazy['ccc'] > $i){
  10. 		echo "\"" . $pz['skl_pl'] . "\",";
  11. 	}else{
  12. 		echo "\"" . $pz['skl_pl'] . "\"";
  13. 	}
  14. 	$i++;
  15. }
  16. echo "	];	";
  17. ?>
  18. $('.autoc').on("focus", function(){
  19.   $(this).autocomplete({
  20.    minLength: 2,
  21.    source: tags
  22. 	});
  23. });
  24. }//]]> 
  25. </script>
[PHP] pobierz, plaintext


Teraz tylko class="autoc" w input'cie i powinno działać... ale nie działa :-//
Tzn. działa do chwili podpięcia dynamiki dodawania inputu :-///
Comandeer
3.09.2015, 20:42:28
Bo to działa tylko dla istniejących elementów. Jeśli chcesz dla wszystkich, w tym nowych trza to zrobić przy pomocy event delegation:
Kod
$('body').on("focus", '.autoc', function(){
//itd
thek
3.09.2015, 21:56:09
Lepiej niech ograniczy do najbliższego przodka zawsze w DOM występującego, bo jednak oddelegowanie na całe body może być lekko obciążające.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.