jquery ui autocomplete

8. 11. 2010 20:47:23

Zdravim,

prosim o pomoc javascript neovladam:

Mam funkci z autocomplete z - http://jqueryui.com/demos/autocomplete/#remote-jsonp, ktera vypisuje mesta z celeho sveta do input type text, potreboval bych aby to zaroven i ulozilo gps a id daneho mesta do inputu hidden, muzete mi prosim pridat radky kodu, ktere by to udelali?

prikladam zdrojovy kod:

Your city:

Result:

8. 11. 2010 20:47:23

https://webtrh.cz/diskuse/jquery-ui-autocomplete/#reply582545

pehape

(8 hodnocení)

18. 11. 2010 17:20:45

A tobě to, co jsi tu zkopíroval funguje? Nemyslím na té původní stránce, ale ten kód, co tu máš vypsaný.

18. 11. 2010 17:20:45

https://webtrh.cz/diskuse/jquery-ui-autocomplete/#reply582544

Tom Novy

(43 hodnocení)

18. 11. 2010 22:36:53

Ano funguje

18. 11. 2010 22:36:53

https://webtrh.cz/diskuse/jquery-ui-autocomplete/#reply582543

pehape

(8 hodnocení)

18. 11. 2010 23:24:39

tak, jestli ti to funguje tak tam nahraď toto:

label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,

za toto:

label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName + " lat: " + item.lat + " lng: " + item.lng,

já zatím vymyslím, aby to fungovalo v lepším formátu

---------- Příspěvek doplněn 19.11.2010 v 01:22 ----------

Pokud ti jde o ten hidden lat, lng, id, tak tu je kompletní skript:

<?php
  header('Content-type: text/html; charset=utf-8',true);
  if (isset($_POST))
    { 
    echo $_POST."<br />";    
    echo $_POST."<br />";
    echo $_POST."<br />";
    echo $_POST."<br />";
    echo $_POST."<br />";
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Vyhledávání měst</title>
	<style>
	.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
	#city { width: 25em; }
	</style>
	<script>
	$(function() {
		function log( message ) {
			$( "<div/>" ).text( message ).prependTo( "#log" );
			$( "#log" ).attr( "scrollTop", 0 );
		}
 
		$( "#city" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: "http://ws.geonames.org/searchJSON",
					dataType: "jsonp",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function( data ) {					
						response( $.map( data.geonames, function( item ) {					  						  
							return {
								label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
								value: item.name,
								country: item.countryName,
								lat: item.lat,
								lng: item.lng,
								id: item.geonameId
							}
						}));
					}
				});
			},
			minLength: 2,
			select: function( event, ui ) {
			  document.getElementById("country").value=ui.item.country;
			  document.getElementById("lat").value=ui.item.lat;
				document.getElementById("lng").value=ui.item.lng;
				document.getElementById("id").value=ui.item.id;
				log( ui.item ?
					"Selected: " + ui.item.label :
					"Nothing selected, input was " + this.value);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
	});
	</script>
</head>
<body>
 
<div class="demo">
 
<div class="ui-widget">
  <form action="g.php" method="post" id="form">  
	  <label for="city">Your city: </label>	
	  <input id="city" name="city" />
	  <input type="hidden" name="country" id="country"/>
	  <input type="hidden" name="lat" id="lat"/>
	  <input type="hidden" name="lng" id="lng"/>
	  <input type="hidden" name="id" id="id"/>
	  <input type="submit" value="odeslat" />
	</form>
	Powered by <a href="http://geonames.org">geonames.org</a>
</div>
 
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Result:
	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
 
</div>
 
</body>
</html>

---------- Příspěvek doplněn 19.11.2010 v 01:43 ----------

toto je funkce pro převod na stupně:

takže teď bude ten výpis:

18. 11. 2010 23:24:39

https://webtrh.cz/diskuse/jquery-ui-autocomplete/#reply582542

engal

19. 11. 2010 09:53:58

ja bych mel jeste jeden trosku jiny dokaz. Potreboval bych nastavit aby nektere radky pouzivaly jiny styl. Asi to pujde nejak ve funkci open, ale nedari se mi prijit na to jak ziskat konktretni radek a ani se mi nedari vubec zmenit styl. Priklad vyse mi vubec nefunguje

$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );

Mockrat diky za pomoc.

19. 11. 2010 09:53:58

https://webtrh.cz/diskuse/jquery-ui-autocomplete/#reply582541

pehape

(8 hodnocení)

19. 11. 2010 12:52:55

Priklad vyse mi vubec nefunguje

co ti nefunguje? kód od Tom Novy nebo od pehape nebo oboje?

potřebuje to: jquery, ui/jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.position.js, jquery.ui.autocomplete.js

Potreboval bych nastavit aby nektere radky pouzivaly jiny styl

které? jquery si vytvoří vlastní vnitřní divy, takže je nejlepší upravovat jquerovské .css

---------- Příspěvek doplněn 19.11.2010 v 12:54 ----------

Kdo chce mít výsledky ve správné češtině (nebo i jiném jazyku), ať napíše pod kód

ještě

19. 11. 2010 12:52:55

https://webtrh.cz/diskuse/jquery-ui-autocomplete/#reply582540

engal

19. 11. 2010 13:47:11

autocomplete mi funguje, jen potrebuji aby pri nacteni moznosti a najeti mysi na urcitou polozku (napriklad na tu jejiz hodnota se rovna "apple") se tato zobrazovala jinak nez ostatni (napriklad bude cervene). to by mohlo souviset s funkci open, ve kterych bych rad nalezl danou polozku a zmenil ji styl.

Bohuzel ani prosta zmena stylu tak ja je uvedena tedy :

open: function() {

$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );

}

Styly mam v jquery.css nadefinovane odlisne, mi nefunguje.

Jeste jednou diky za rady

19. 11. 2010 13:47:11

https://webtrh.cz/diskuse/jquery-ui-autocomplete/#reply582539

Pro odpověď se přihlašte.

Přihlásit