Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Skrypt autocomplete przypisany do dynamicznie dodawanych inputów, Jeden input na start + dodawanie kolejnych dynamicznie
d0m1n1k_
post
Post #1





Grupa: Zarejestrowani
Postów: 208
Pomógł: 3
Dołączył: 13.07.2009
Skąd: Tarnów

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Comandeer
post
Post #2





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post

Posty w temacie
- d0m1n1k_   Skrypt autocomplete przypisany do dynamicznie dodawanych inputów   2.09.2015, 17:37:16
- - Comandeer   AFAIR jQuery UI i tego typu działania nie lubią si...   2.09.2015, 17:40:52
- - d0m1n1k_   Nic nie zrozumiałem :-/ Ja w tych tematach jestem ...   2.09.2015, 20:37:13
- - Comandeer   Bo to działa tylko dla istniejących elementów. Jeś...   3.09.2015, 20:42:28
- - thek   Lepiej niech ograniczy do najbliższego przodka zaw...   3.09.2015, 21:56:09

« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 9.10.2025 - 18:22
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn