Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jquery ui autocomplete - zastosowanie pętli
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
niebieszki
Witam posiadam zmienne o id tablicowych i chciałbym aby poniższa funkcja odnosiła się do nich wszystkich
Funkcja ta to jquery ui autocomplete... działajaca porprawnie dla elementy 1 z tablicy. Oto jej kod
[JAVASCRIPT] pobierz, plaintext
  1. $( '#product_name\\[1\\]' ).autocomplete({
  2. source: function(req, add){
  3. $.ajax({
  4. url: base_url + 'shop/bill/search_product',
  5. dataType: 'json',
  6. type: 'POST',
  7. data: req,
  8. success: function(data){
  9. if(data.response =='true'){
  10. add(data.message);
  11. }
  12. }
  13. });
  14. },
  15. minLength: 1,
  16. select: function(event, ui){
  17. $('#sell_price\\[1\\]').val(ui.item.price);
  18. $('#product_id\\[1\\]').val(ui.item.id);
  19. }
  20. });
[JAVASCRIPT] pobierz, plaintext


Chciałbym dodać pętle która wykona autocomplete dla wszystkich zmiennych z tablicy (no powiedzmy aby było prościej to dla 100 pierwszych) nie tylko dla 1 elementu więc zmieniłem kod na taki:

[JAVASCRIPT] pobierz, plaintext
  1. var i=0;
  2. while(i <= 100){
  3. $( '#product_name\\['+i+'\\]' ).autocomplete({
  4. source: function(req, add){
  5. $.ajax({
  6. url: base_url + 'shop/bill/search_product',
  7. dataType: 'json',
  8. type: 'POST',
  9. data: req,
  10. success: function(data){
  11. if(data.response =='true'){
  12. add(data.message);
  13. }
  14. }
  15. });
  16. },
  17. minLength: 1,
  18. select: function(event, ui){
  19. $('#sell_price\\['+i+'\\]').val(ui.item.price);
  20. $('#product_id\\['+i+'\\]').val(ui.item.id);
  21. }
  22. });
  23. i++;
  24. };
[JAVASCRIPT] pobierz, plaintext

Podpowiedz autocomplitera nadal działają przy takiej deklaracji lecz niestety już zmienne nie są dodawane do pól #sell_price i #product_id.

Gdzie może być błąd?
askone
Po co pętla.... Nie lepiej skorzystać z funkcji jquery .each(). Jednym z warunków skorzystania z tego rozwiązania jest zmiana selektora jquery, któy pobierasz elementy na których uruchomisz funkcję .autocomplete(). Sugerowałbym coś w stylu $('[id^="product_name"]')

Nie sprawdzałem tego selektora, ale możesz odpalić go z poziomu konsoli firebuga i sprawdzić czy pobierze pełną kolekcję elementów

Pozdrawiam
erix
Ale to i tak mało wydajne rozwiązania. Nie możesz dodać klasy do tych obiektów i załatwić wszystkiego jednym selektorem?
niebieszki
no mogę dodać klasę do każdego inputa ale jak potem z takiej klasy skorzystać w kodzie z pierwszego postu?
everth
Niewydajne? W jakim sensie? Przecież to jest odpalane raz w całym skrypcie - dłużej będą trwać odpowiedzi na zapytania AJAXowe. Poza tym nie jestem pewien czy silnik jQuery domyślnie nie zapamiętuje wyników działania selektora. Nie łapię sensu takiej optymalizacji, przynajmniej nie tutaj.
erix
Cytat
ale jak potem z takiej klasy skorzystać w kodzie z pierwszego postu?

Zmieniasz tylko selektor. wink.gif

Cytat
Niewydajne? W jakim sensie? Przecież to jest odpalane raz w całym skrypcie - dłużej będą trwać odpowiedzi na zapytania AJAXowe.

Nie do końca.

Cytat
Poza tym nie jestem pewien czy silnik jQuery domyślnie nie zapamiętuje wyników działania selektora.

Owszem, zapamiętuje, ale najpierw trzeba takowy selektor wywołać. A 100 wywołań unikalnych nie podlegaja zcache'owaniu. Ponowne wywołanie selektora, który odwołuje się w ten sam sposób do elementu już owszem.

Kod
while(i <= 100){
         $( '#product_name\\['+i+'\\]' )

To jest 100 różnych wywołań.

Selektor klasy będzie wydajniejszy -> tylko jedno wywołanie + wewnętrzne optymalizacje. Zresztą, sprawdź sobie sam. wink.gif
everth
A, ty do tego pijesz smile.gif Pierwszy kod oczywiście że jest niewydajny (choć można go ulepszyć). Ja mówiłem to w odniesieniu do rozwiązania @askone. Rozwiązanie z klasą czasami też nie jest najwydajniejsze (chyba IE dalej nie zaimplementował getElementsByClass), ale to już szukanie dziury w całym.
erix
Cytat
Rozwiązanie z klasą czasami też nie jest najwydajniejsze (chyba IE dalej nie zaimplementował getElementsByClass)

Już pod IE8 jest wyjście z querySelector. wink.gif

Nie wiem, jak jest to we frameworkach, ale śmiem twierdzić, że jest to pierwsza z metod, która jest wykrywana.
niebieszki
Koledzy a może jakieś konkrety?

erix czy mogłbyś coś więcej o tych klasach? mam dodać do kazdej tablicy inputów jakąs konkretną klasą tylko jak wtedy rozpoznać do jakiego pola powinna powedrować wartośc z autocomplitera?
erix
To są właśnie konkrety - dodaj do tych wszystkich pól jednakową klasę, z kod dodawania listy autocomplete wywal pętlę i zmień selektor na klasę.
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.