Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Wypełnianie input z zapytania ajax
niebieszki
post 15.02.2011, 10:20:27
Post #1





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 30.09.2010

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

Witam

Mój problem jest nastepujacy: Stworzyłem formularz z polem input z dynamiczną wyszukiwarką (.ajaxComplete()) Chciałbym aby wyniki mojego wyszukiwania były umieszczanie w kilku polach input bez przeładowywania strony czyli:
wpisuje np. Wr (miasto do pola input) wybieram z listy interesujące miasto [do tego mometu mam]
i po wybraniu kolejne inputy zostają załadowane wartościami z bazy danych (np. pole wojewodztwo, czy kod pocztowy do odpowiednich inputów).

Jak sie za to zabrać? Co powinienem poczytać od czego zacząć aby ugryźć to?
Go to the top of the page
+Quote Post
nospor
post 15.02.2011, 10:22:04
Post #2





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Korzystam z tego pluginu do jquery:
http://bassistance.de/jquery-plugins/jquer...n-autocomplete/
realizuje dokładnie to czego chcesz - możesz do podpowiadania dodawać dodatkowe dane i robić z nimi co chcesz


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
niebieszki
post 15.02.2011, 10:45:10
Post #3





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 30.09.2010

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

hej dzieki za szybko odpwiedź właśnie chciałem edytowac swojego posta że kozystam z tego pluginu. I znalazlem na stronie w przykładach http://jquery.bassistance.de/autocomplete/demo/ że można p wyszukaniu wstawić pola do inputów... nie mogę tylko znaleźć tej opcji... (zabieram sie za studiowanie dokumentacji)

Ten post edytował niebieszki 15.02.2011, 10:47:12
Go to the top of the page
+Quote Post
nospor
post 15.02.2011, 10:52:26
Post #4





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Chodzi o funkcję result()

Ze strony co sam podales masz przyklady:
Kod
$("#singleBirdRemote").result(function(event, data, formatted) {
        if (data)
            $(this).parent().next().find("input").val(data[1]);
    });
    $("#suggest4").result(function(event, data, formatted) {
        var hidden = $(this).parent().next().find(">:input");
        hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
    });

Result jest odpalane po wybraniu podpowiedzi a data zawiera dane, ktore szly jak podpowiedź

Jesli przekazywales dane tak
1
2
3
...
To dodatkowe dane przekazujesz poprzez dodanie |
1|cosinnego|cosinnego2
2|cosinnego|cosinnego2
.......
i data[1], data[2] zawiera dodatkowe dane


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
niebieszki
post 15.02.2011, 11:12:58
Post #5





Grupa: Zarejestrowani
Postów: 27
Pomógł: 0
Dołączył: 30.09.2010

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

Dziękuję bardzo za pomoc.

Patrzyłem na źródło strony na ten fragment co podałeś ale za szybko myślałem że funkcja się kończy - moje nie dopatrzenie. Dzieki jeszcze raz za wyjaśnienia.
_______________________________________________________
_______________________________________________________

php.gif Mam jednak kolejny problem z tym pluginem.

Przerabiam te przykłady co sa na stronie i tak mnie zastanawia skad sie bierze zmeinna 'q'? Z tablicy superglobalnej Get ale jak tam trafia?

w przykładzie Kod:
[PHP] pobierz, plaintext 
  1. $q = strtolower($_GET["q"]);
  2. if (!$q) return;
  3. $items = array(
  4. "Great <em>Bittern</em>"=>"Botaurus stellaris",
  5. "Little <em>Grebe</em>"=>"Tachybaptus ruficollis",
  6. "Black-necked Grebe"=>"Podiceps nigricollis",
  7. "Little Bittern"=>"Ixobrychus minutus",
  8. "Black-crowned Night Heron"=>"Nycticorax nycticorax",
  9. "Purple Heron"=>"Ardea purpurea",
  10. "White Stork"=>"Ciconia ciconia",
  11. "Spoonbill"=>"Platalea leucorodia",
  12. "Red-crested Pochard"=>"Netta rufina",
  13. .
  14. .
  15. .
  16. "Solitary Sandpiper"=>"Tringa solitaria",
  17. "Heuglin's Gull"=>"Larus heuglini"
  18. );
  19.  
  20. foreach ($items as $key=>$value) {
  21. 	if (strpos(strtolower($key), $q) !== false) {
  22. 		echo "$key|$value\n";
  23. 	}
  24. }
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.  
  5. <title>jQuery Autocomplete Plugin</title>
  6. <script type="text/javascript" src="../lib/jquery.js"></script>
  7. <script type='text/javascript' src='../lib/jquery.bgiframe.min.js'></script>
  8. <script type='text/javascript' src='../lib/jquery.ajaxQueue.js'></script>
  9. <script type='text/javascript' src='../lib/thickbox-compressed.js'></script>
  10. <script type='text/javascript' src='../jquery.autocomplete.js'></script>
  11. <script type='text/javascript' src='localdata.js'></script>
  12. <link rel="stylesheet" type="text/css" href="main.css" />
  13. <link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css" />
  14. <link rel="stylesheet" type="text/css" href="../lib/thickbox.css" />
  15.  
  16. <script type="text/javascript">
  17. $().ready(function() {
  18.  
  19. 	function log(event, data, formatted) {
  20. 		$("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
  21. 	}
  22.  
  23. 	function formatItem(row) {
  24. 		return row[0] + " (<strong>id: " + row[1] + "</strong>)";
  25. 	}
  26. 	function formatResult(row) {
  27. 		return row[0].replace(/(<.+?>)/gi, '');
  28. 	}
  29.  
  30. 	$("#suggest1").focus().autocomplete(cities);
  31. 	$("#month").autocomplete(months, {
  32. 		minChars: 0,
  33. 		max: 12,
  34. 		autoFill: true,
  35. 		mustMatch: true,
  36. 		matchContains: false,
  37. 		scrollHeight: 220,
  38. 		formatItem: function(data, i, total) {
  39. 			// don't show the current month in the list of values (for whatever reason)
  40. 			if ( data[0] == months[new Date().getMonth()] ) 
  41. 				return false;
  42. 			return data[0];
  43. 		}
  44. 	});
  45. 	$("#suggest13").autocomplete(emails, {
  46. 		minChars: 0,
  47. 		width: 310,
  48. 		matchContains: "word",
  49. 		autoFill: false,
  50. 		formatItem: function(row, i, max) {
  51. 			return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
  52. 		},
  53. 		formatMatch: function(row, i, max) {
  54. 			return row.name + " " + row.to;
  55. 		},
  56. 		formatResult: function(row) {
  57. 			return row.to;
  58. 		}
  59. 	});
  60. 	$("#singleBirdRemote").autocomplete("search.php", {
  61. 		width: 260,
  62. 		selectFirst: false
  63. 	});
  64. 	$("#suggest14").autocomplete(cities, {
  65. 		matchContains: true,
  66. 		minChars: 0
  67. 	});
  68. 	$("#suggest3").autocomplete(cities, {
  69. 		multiple: true,
  70. 		mustMatch: true,
  71. 		autoFill: true
  72. 	});
  73. 	$("#suggest4").autocomplete('search.php', {
  74. 		width: 300,
  75. 		multiple: true,
  76. 		matchContains: true,
  77. 		formatItem: formatItem,
  78. 		formatResult: formatResult
  79. 	});
  80. 	$("#imageSearch").autocomplete("images.php", {
  81. 		width: 320,
  82. 		max: 4,
  83. 		highlight: false,
  84. 		scroll: true,
  85. 		scrollHeight: 300,
  86. 		formatItem: function(data, i, n, value) {
  87. 			return "<img src='images/" + value + "'/> " + value.split(".")[0];
  88. 		},
  89. 		formatResult: function(data, value) {
  90. 			return value.split(".")[0];
  91. 		}
  92. 	});
  93. 	$("#tags").autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"], {
  94. 		width: 320,
  95. 		max: 4,
  96. 		highlight: false,
  97. 		multiple: true,
  98. 		multipleSeparator: " ",
  99. 		scroll: true,
  100. 		scrollHeight: 300
  101. 	});
  102.  
  103.  
  104. 	$(":text, textarea").result(log).next().click(function() {
  105. 		$(this).prev().search();
  106. 	});
  107. 	$("#singleBirdRemote").result(function(event, data, formatted) {
  108. 		if (data)
  109. 			$(this).parent().next().find("input").val(data[1]);
  110. 	});
  111. 	$("#suggest4").result(function(event, data, formatted) {
  112. 		var hidden = $(this).parent().next().find(">:input");
  113. 		hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);
  114. 	});
  115.     $("#suggest15").autocomplete(cities, { scroll: true } );
  116. 	$("#scrollChange").click(changeScrollHeight);
  117.  
  118. 	$("#thickboxEmail").autocomplete(emails, {
  119. 		minChars: 0,
  120. 		width: 310,
  121. 		matchContains: true,
  122. 		highlightItem: false,
  123. 		formatItem: function(row, i, max, term) {
  124. 			return row.name.replace(new RegExp("(" + term + ")", "gi"), "<strong>$1</strong>") + "<br><span style='font-size: 80%;'>Email: &lt;" + row.to + "&gt;</span>";
  125. 		},
  126. 		formatResult: function(row) {
  127. 			return row.to;
  128. 		}
  129. 	});
  130.  
  131. 	$("#clear").click(function() {
  132. 		$(":input").unautocomplete();
  133. 	});
  134. });
  135.  
  136. function changeOptions(){
  137. 	var max = parseInt(window.prompt('Please type number of items to display:', jQuery.Autocompleter.defaults.max));
  138. 	if (max > 0) {
  139. 		$("#suggest1").setOptions({
  140. 			max: max
  141. 		});
  142. 	}
  143. }
  144.  
  145. function changeScrollHeight() {
  146.     var h = parseInt(window.prompt('Please type new scroll height (number in pixels):', jQuery.Autocompleter.defaults.scrollHeight));
  147.     if(h > 0) {
  148.         $("#suggest1").setOptions({
  149. 			scrollHeight: h
  150. 		});
  151.     }
  152. }
  153.  
  154. function changeToMonths(){
  155. 	$("#suggest1")
  156. 		// clear existing data
  157. 		.val("")
  158. 		// change the local data to months
  159. 		.setOptions({data: months})
  160. 		// get the label tag
  161. 		.prev()
  162. 		// update the label tag
  163. 		.text("Month (local):");
  164. }
  165. </script>
  166.  
  167. </head>
  168.  
  169. <body>
  170.  
  171. <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Demo</h1>
  172.  
  173. <div id="content">
  174.  
  175. 	<form autocomplete="off">
  176. 		<p>
  177. 			<label>Single City (local):</label>
  178. 			<input type="text" id="suggest1" />
  179. 			<input type="button" value="Get Value" />
  180. 			<input type="button" value="Change Max Items" onclick="changeOptions();" />
  181. 			<input type="button" value="Change to Month Data" onclick="changeToMonths();" />
  182. 			<input type="button" value="Change scroll height" id="scrollChange" />
  183. 		</p>
  184. 		<p>
  185. 			<label>Month (local):</label>
  186. 			<input type="text" id="month" />
  187. 			<input type="button" value="Get Value" />
  188. 			(Current month is excluded from list)
  189. 		</p>
  190. 		<p>
  191. 			<label>E-Mail (local):</label>
  192. 			<input type="text" id="suggest13" />
  193. 			<input type="button" value="Get Value" />
  194. 		</p>
  195. 		<p>
  196. 			<label>Single Bird (remote):</label>
  197. 			<input type="text" id="singleBirdRemote" />
  198. 			<input type="button" value="Get Value" />
  199. 		</p>
  200. 		<p>
  201. 			<label>Hidden input</label>
  202. 			<input />
  203. 		</p>
  204. 		<p>
  205. 			<label>Single City (contains):</label>
  206. 			<input type="text" id="suggest14" />
  207. 			<input type="button" value="Get Value" />
  208. 		</p>
  209. 		<p>
  210. 			<label>Multiple Cities (local):</label>
  211. 			<textarea id='suggest3' cols='40' rows='3'></textarea>
  212. 			<input type="button" value="Get Value" />
  213. 		</p>
  214. 		<p>
  215. 			<label>Multiple Birds (remote):</label>
  216. 			<textarea id='suggest4'></textarea>
  217. 			<input type="button" value="Get Value" />
  218. 		</p>
  219. 		<p>
  220. 			<label>Hidden input</label>
  221. 			<textarea></textarea>
  222. 		</p>
  223.     <p>
  224. 			<label>Image search (remote):</label>
  225. 			<input type="text" id='imageSearch' />
  226. 			<input type="button" value="Get Value" />
  227. 		</p>
  228.     <p>
  229. 			<label>Tags (local):</label>
  230. 			<input type="text" id='tags' />
  231. 			<input type="button" value="Get Value" />
  232. 		</p>
  233. 		<p>
  234. 			<label>Some dropdown (&lt;3 IE):</label>
  235. 			<select>
  236. 				<option value="">Item 12334455</option>
  237. 				<option value="2">Item 2</option>
  238. 				<option value="3">Item 3</option>
  239. 				<option value="4">Item 4</option>
  240. 			</select>
  241. 		</p>
  242.  
  243. 		<input type="submit" value="Submit" />
  244. 	</form>
  245.  
  246. 	<p>
  247. 		<a href="#TB_inline?height=155&width=400&inlineId=modalWindow" class="thickbox">Click here for an autocomplete inside a thickbox window.</a> (this should work even if it is beyond the fold)
  248. 	</p>		
  249.  
  250. 	<div id="modalWindow" style="display: none;">
  251.                 <p>
  252.                         <label>E-Mail (local):</label>
  253.                         <input type="text" id="thickboxEmail" />
  254.                         <input type="button" value="Get Value" />
  255.                 </p>
  256. 		</div>
  257.  
  258. 	<button id="clear">Remove all autocompletes</button>
  259.  
  260. 	<a href="search.phps">PHP script used to for remote autocomplete</a>
  261.  
  262. 	<h3>Result:</h3> <ol id="result"></ol>
  263.  
  264. </div>
  265. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  266. </script>
  267. <script type="text/javascript">
  268. _uacct = "UA-2623402-1";
  269. urchinTracker();
  270. </script>
  271. </body>
  272. </html>
[HTML] pobierz, plaintext



W moim kodzie brakuje tej zmiennej... nie moge zrozumiec jak powinienem z tego autocomplitera skozytac?
bo gdy wpisuje taki kod to nic nie działa: 

[JAVASCRIPT] pobierz, plaintext 
  1. $(document).ready(function() { 
  2. 		$("input[name='company_name']").autocomplete(base_url+"/shop/bill/client");
  3. 	});
[JAVASCRIPT] pobierz, plaintext


a metoda client wyswietla dane w takim formacie: 
[HTML] pobierz, plaintext 
  1. 1|Jan|Kowalski
  2. 2|Andrzej|Nowak
  3. 3|Karol|Przykładowy
[HTML] pobierz, plaintext


a pole na którym chciałbym zrobic wyszukiwanie jest następująco zadelkarowane:
[HTML] pobierz, plaintext 
  1. <input type="text" name="company_name" value="" id="company_name" />
[HTML] pobierz, plaintext


Ten post edytował niebieszki 15.02.2011, 15:46:15
Go to the top of the page
+Quote Post
« Następny starszy · AJAX · Następny nowszy »
 

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

 

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

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

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