Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][JavaScript]jquery autocomplete -własne parametry
Forum PHP.pl > Forum > Przedszkole
rafik73
23.10.2015, 07:01:45
Witam
Korzystam z najnowszego pluginu
jquery autocomplete, wszystko chodzi fajnie,
dane pobieram z pliku z zapytaniem MySQL.
Używam standardowych parametrów: label i value
Potrzebuje dodatkowych parametrów, np.: o nazwie id.
Istnieje taka możliwość, czy tylko te dwa
parametry przypisane na stałe?
Czyli...
Mam kolumny id_osoby, name, miasto.
Chcę przesłać odpowiednio za pomocą parametrów :
label: name,miasto
value: name
id: id_osoby
Pyton_000
23.10.2015, 07:58:17
A wiesz ile jest takich skryptów do autocomplete?
rafik73
23.10.2015, 08:25:03
No właśnie sęk w tym, że nie mogłem znaleźć
rozwiązania w necie.
kapslokk
23.10.2015, 08:27:34
Myślę, że Pytonowi po prostu chodzi o to, że jak podasz konkretnie którego autocomplete'ra używasz, będzie znacznie łatwiej Ci pomóc wink.gif
rafik73
23.10.2015, 08:59:58
Sorki
Chodzi o najnowszy jquery ui 1.11.4
Pyton_000
23.10.2015, 09:06:53
http://stackoverflow.com/questions/7292462...mplete-response
rafik73
23.10.2015, 09:57:18 
[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3.  
  4. $q=$_GET["term"];
  5. if (!$q) return;
  6.  
  7. mysql_query("SET NAMES 'utf8'");//polskie znaki
  8. $query = mysql_query("SELECT * FROM baza WHERE miasto LIKE '$q%'  ORDER BY miasto") or die(i'Błąd zapytania');
  9.  
  10.  
  11. $json=array();
  12.  
  13.     while($z=mysql_fetch_array($query)){
  14.          $json[]=array(
  15.                     "value"=> $z['name],
  16.                     "label"=>$z['miasto'],
  17.                    "id"=>$z['id_osoby']  // to chcę dodać
  18.  
  19.                         );
  20.     }
  21.  
  22.  echo json_encode($json);
  23. ?>
[PHP] pobierz, plaintext

Pyton_000
23.10.2015, 09:58:57
no super, Ty powiedziałeś co chcesz, ja dałem rozwiązanie... A gdzie to chcesz dodać?
rafik73
23.10.2015, 10:10:42
id ma być przesłane do formularza,do hidden

[JAVASCRIPT] pobierz, plaintext 
  1. <script type="text/javascript">// <![CDATA[
  2. $(function() {
  3.  
  4. 			$("#search").autocomplete({
  5. 				source: "search.php",minLength:1,
  6. 				focus: function(event, ui) {
  7. 					// prevent autocomplete from updating the textbox
  8. 					event.preventDefault();
  9. 					// manually update the textbox
  10. 					$(this).val(ui.item.label);
  11. 				},
  12. 				select: function(event, ui) {
  13. 					// prevent autocomplete from updating the textbox
  14. 					event.preventDefault();
  15. 					// manually update the textbox and hidden field
  16. 					$(this).val(ui.item.label);
  17. 					$("#id_search").val(ui.item.value);
  18. 				}
  19. 			});
  20. 		});
  21.  
  22. // ]]></script>
[JAVASCRIPT] pobierz, plaintext

Pyton_000
23.10.2015, 10:11:38
$("#id_search").val(ui.item.value);

zmień value na klucz id i tyle.
rafik73
23.10.2015, 10:19:30
Też tak myślałem ale tak nie działa,mam wrażenie, że value
i label są na stałe zapisane w skrypcie jquery
Pyton_000
23.10.2015, 10:21:44
console.log(ui.item)
rafik73
23.10.2015, 20:15:30
Sprawdzę po 15,bo teraz z pracy ze smartfona piszę :-)

To była literówka, działa, dzięki wielkie !
Ale to nie koniec problemu....mam problem z wyświetlaniem tych danych w pętli. na stronie wyświetlam zawartość bazy danych
w formularzu do edycji, która jest w pętli while.
Skrypt szukania:
[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3.  
  4. $q=$_GET["term"];
  5. if (!$q) return;
  6.  
  7. mysql_query("SET NAMES 'utf8'");//polskie znaki
  8. $query = mysql_query("SELECT name,surname,id,miasto FROM miasta WHERE  surname LIKE '$q%'  ORDER BY surname ASC") or die('Błąd zapytania');
  9.  
  10.  
  11. $json=array();
  12.  
  13.     while($s=mysql_fetch_array($query)){
  14.  
  15.          $json[]=array(
  16.                     "value"=> $s['surname'].' '.$s['name'],
  17.                     "label"=>$s['surname'].' '.$s['name'].' '.$s['miasto'],
  18.                     "id"=>$s['id'] ,
  19.                     "miasto"=>$s['miasto']
  20.  
  21.                         );
  22.  
  23.     }
  24.  
  25.  echo json_encode($json);
  26. ?>
[PHP] pobierz, plaintext


odbieram:

[JAVASCRIPT] pobierz, plaintext 
  1. <script type="text/javascript">
  2. $(function() {
  3.  
  4. 			$(".search").autocomplete({
  5.  
  6. 				source: "search.php",minLength:2,
  7. 				focus: function(event, ui) {
  8. 					// prevent autocomplete from updating the textbox
  9. 					event.preventDefault();
  10. 					// manually update the textbox
  11. 					$(this).val(ui.item.label);
  12. 				},
  13. 				select: function(event, ui) {
  14. 					// prevent autocomplete from updating the textbox
  15. 					event.preventDefault();
  16. 					// manually update the textbox and hidden field
  17. 					$(this).val(ui.item.value);
  18. 					$(".id_search").val(ui.item.id);
  19.           $(".id_miasto_search").val(ui.item.miasto);
  20. 				}
  21. 			});
  22. 		});
  23.  
  24. </script>
[JAVASCRIPT] pobierz, plaintext


Wysyłam do formularza w pętli, wyświetla się powiedzmy 5 rekordów.
Problem w tym, że wysyła te same dane do textboxa o klasie 'id_miasto_search' oraz 'id_search'
Nie traktuje pojedyńczego rekordu tylko masowo.

czyli mamy:

[PHP] pobierz, plaintext 
  1. while{
  2. textbox1 class="id_search";
  3. textbox2 class="id_miasto_search";
  4. }
[PHP] pobierz, plaintext


Pyton_000
23.10.2015, 21:08:42
Nie do końca rozumiem. albo to wina pory.
rafik73
23.10.2015, 21:53:52 
[PHP] pobierz, plaintext 
  1. // tu zapytanie mysql, $query
  2. while($a=mysql_fetch_array($query)){
  3. echo'<input type="text" class="search" name="nazwisko" value=".'$a ['name']">';
  4. echo'<input type="text" class="id_search" name="id" value=".'$a ['id']">';
  5. echo'<input type="text" class="id_miasto_search" name="miasto" value=".'$a ['id_miasto']">';
  6. }
[PHP] pobierz, plaintext


Kiedy edytuje textbox o klasie search, to wartości id_search oraz id_miasto_search są przekazywane do wszystkich rekordów w pętli a nie tylko do edytowanego.
Pyton_000
24.10.2015, 09:18:34
Ujmij inputy w np. div i potem przypisuj wartości na zasadzie:

$(this).closest('div').find(".id_miasto_search").val(ui.item.miasto);
rafik73
24.10.2015, 10:41:36
Nie działa, za to dla klasy 'id_search' zadziałało:

[JAVASCRIPT] pobierz, plaintext 
  1. $(this).parent().parent().parent().find(".id_search").val(ui.item.id);
[JAVASCRIPT] pobierz, plaintext


zaś dla klasy 'id_miasto_search' nie działa. fakt, że input z tą klasą nie jest obok inputa 'id_search', tylko pod innymi divami, w
innej części formularza, ale nie mogę go namierzyć parentami, dopiero gdy dorzucę jeden parent, czyli:

[JAVASCRIPT] pobierz, plaintext 
  1. $(this).parent().parent().parent()..parent()find(".id_miasto_search").val(ui.item.miasto);
[JAVASCRIPT] pobierz, plaintext


to się wyświetla ale niestety we wszystkich rekordach sad.gif
trueblue
24.10.2015, 11:31:42
W każdym .search przechowuj w atrybucie np. data-id-search oraz data-id-miasto, id pól zależnych (im nadaj unikalne id).
W metodzie select pobierz obydwa atrybuty z elementu .search, dzięki temu nie będziesz musiał przeszukiwać struktury.
rafik73
24.10.2015, 14:18:06
Można prosić bardziej łopatologicznie? biggrin.gif
trueblue
24.10.2015, 15:55:02
Kiedy tworzysz elementy w pętli nadaj im id, np. id="search1" i id="miasto1", i tak po kolei.
W elemencie .search powiązanym z tymi elementami dodaj atrybuty: data-id1="search1" i data-id2="miasto1".
W metodzie select pobierz wartości atrybutów (.attr('data-id1') .attr('data-id2')), pobrane wartości wskażą na powiązane elementy, który chcesz uzupełnić.
rafik73
24.10.2015, 19:16:02
Ale klasy w tych elementach się nie pozbywać?
trueblue
24.10.2015, 19:36:43
Do tego co proponuję, klasa nie jest potrzebna.
rafik73
25.10.2015, 20:00:19
Coś takiego skleciłem ale nie działa:

[JAVASCRIPT] pobierz, plaintext 
  1. $(function() {
  2. 			 $("#id_search").attr("data-id_search");
  3.         $("#id_miasto_search").attr("data-id_miasto_search");    
  4. 			$(".search").autocomplete({
  5.  
  6. 				source: "search.php",minLength:2,
  7. 				focus: function(event, ui) {
  8. 					// prevent autocomplete from updating the textbox
  9. 					event.preventDefault();
  10. 					// manually update the textbox
  11. 					$(this).val(ui.item.label);
  12. 				},
  13. 				select: function(event, ui) { 
  14.  
  15. 					// prevent autocomplete from updating the textbox
  16. 					event.preventDefault();
  17. 					// manually update the textbox and hidden field
  18. 					$(this).val(ui.item.value);   
  19.  
  20.  
  21.           $("data-id_search").val(ui.item.id);
  22.           $("data-id_miasto_search").val(ui.item.miasto);
  23. 				}
  24.  
  25. 			});
  26. 		});
[JAVASCRIPT] pobierz, plaintext


Oczywiście dodałem dwa inputy o id 'id_search' oraz 'id_miasto_search'
Co robię nie tak?
trueblue
25.10.2015, 20:10:25
Co robisz w liniach 2/3 oraz 21/22?
rafik73
25.10.2015, 20:18:56
2/3 nadaje atrybuty




inputy:

[PHP] pobierz, plaintext 
  1. while{
  2. textbox1 id="id_search";
  3. textbox2 id="id_miasto_search";
  4. }
[PHP] pobierz, plaintext


21/22 wysyłam dane do textboxów
trueblue
25.10.2015, 20:23:52
Sprawdź (w dokumentacji) jak się nadaje atrybuty. Jeśli to zrobisz, to nie nadawaj elementom (a dokładnie jednemu, bo miałeś jednego nadawać) w js, tylko w bezpośrednio w html/php.
$ w jQuery jest selektorem, wybierającym elementy od danym id, klasie, tagu, etc. Ty nie masz w kodzie tagów <data-id_search>, miałeś pobrać z jednego elementu nadane atrybuty (nadane paragraf wyżej) i dzięki temu miałbyś "wskaźniki" na dwa zależne elementy.
rafik73
25.10.2015, 20:36:11
Wycinek z http://api.jquery.com/attr/

[HTML] pobierz, plaintext 
  1. <img id="greatphoto" src="brush-seller.jpg" alt="brush seller">
[HTML] pobierz, plaintext



Setting a simple attribute

To change the alt attribute, simply pass the name of the attribute and its new value to the .attr() method:


[JAVASCRIPT] pobierz, plaintext 
  1. $( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
[JAVASCRIPT] pobierz, plaintext
trueblue
25.10.2015, 20:42:49
Cytat(rafik73 @ 25.10.2015, 20:36:11 ) *
Setting a simple attribute

To change the alt attribute, simply pass the name of the attribute and its new value to the .attr() method:

[JAVASCRIPT] pobierz, plaintext 
  1. $( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
[JAVASCRIPT] pobierz, plaintext

To tylko potwierdza, że niepoprawnie to robisz, abstrahując od tego, że niepotrzebnie w JS i nie dla tych elementów.
rafik73
25.10.2015, 21:14:11
Cytat(rafik73 @ 25.10.2015, 21:18:56 ) *
2/3 nadaje atrybuty




inputy:

[PHP] pobierz, plaintext 
  1. while{
  2. textbox1 id="id_search";
  3. textbox2 id="id_miasto_search";
  4. }
[PHP] pobierz, plaintext


21/22 wysyłam dane do textboxów


Ale nadałem atrybuty id powyżej


chwila,chwila,chyba łape

Czyli nadaje atrybuty elementom?:


[PHP] pobierz, plaintext 
  1. while{
  2. textbox1 data-id_search="id_search"  id="id_search";
  3. textbox2 data-id_miasto_search="id_miasto_search"   id="id_miasto_search";
  4. }
[PHP] pobierz, plaintext
Pyton_000
25.10.2015, 21:15:30
Czy Ty znasz podstawy HTML i JS?
rafik73
25.10.2015, 21:32:03
Cytat(trueblue @ 24.10.2015, 16:55:02 ) *
Kiedy tworzysz elementy w pętli nadaj im id, np. id="search1" i id="miasto1", i tak po kolei.
W elemencie .search powiązanym z tymi elementami dodaj atrybuty: data-id1="search1" i data-id2="miasto1".
W metodzie select pobierz wartości atrybutów (.attr('data-id1') .attr('data-id2')), pobrane wartości wskażą na powiązane elementy, który chcesz uzupełnić.



[PHP] pobierz, plaintext 
  1. while{
  2. textbox data-id_search="id_search" data-id_miasto_search="id_miasto_search" class="search";
  3.  
  4. textbox1   id="id_search";
  5. textbox2    id="id_miasto_search";
  6. }
[PHP] pobierz, plaintext


o to ci chodziło?

Kod php powyżej ma charakter poglądowy, dlatego ma taki dziwny zapis.
trueblue
25.10.2015, 22:11:29
Prawie. Jako, że tworzysz elementy w pętli, będzie ich wiele, a to oznacza, że muszą mieć różne id (dodawaj do id jakąś wartość licznika).
Wtedy linie 2/3 nie są potrzebne, a 21/22 trzeba będzie zmodyfikować.
rafik73
25.10.2015, 22:43:00
O ludzie,te dane mam już w 2 pętlach wyświetlane,i teraz mam 3 dołożyć? Nie ma innej metody?
trueblue
25.10.2015, 22:59:12
Jeśli masz dwie pętle, jedną do tworzenia .search, a drugą do tych dwóch inputów, to należy zmodyfikować obydwie.
rafik73
26.10.2015, 11:06:53
Jedna pętla generuje kalendarz z samymi poniedziałkami
a druga wyświetla zawartość tabeli MySQL, zawartość tabeli jest nakladana według dat na wygenerowany kalendarz

.search jest w jednym formularzu z 'id_search' i 'id_miasto_search'.
trueblue
26.10.2015, 11:26:27
Jakąkolwiek/wszystkie pętlę/e gdzie tworzysz .search oraz id_search i id_miasto_search.
rafik73
28.10.2015, 19:55:00
trueblue, serdeczne dzięki. Fajnie, że komuś się chce pochylać nad oczywistymi tematami.
Pytałeś o podstawy - jakieś są. Z braku czasu programuję modułowo i na miarę potrzeb.
Mam zacięcie i zamiłowanie, ale jw. No i niestety, te "dziury" czasami wychodzą.
Pozdrawiam i dzięki.
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.