Forum PHP.pl > Wypełnianie input z zapytania ajax

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Wypełnianie input z zapytania ajax

niebieszki

15.02.2011, 10:20:27

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?

nospor

15.02.2011, 10:22:04

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

niebieszki

15.02.2011, 10:45:10

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)

nospor

15.02.2011, 10:52:26

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

niebieszki

15.02.2011, 11:12:58

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.
_______________________________________________________
_______________________________________________________

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 
$q = strtolower($_GET["q"]);
if (!$q) return;
$items = array(
"Great <em>Bittern</em>"=>"Botaurus stellaris",
"Little <em>Grebe</em>"=>"Tachybaptus ruficollis",
"Black-necked Grebe"=>"Podiceps nigricollis",
"Little Bittern"=>"Ixobrychus minutus",
"Black-crowned Night Heron"=>"Nycticorax nycticorax",
"Purple Heron"=>"Ardea purpurea",
"White Stork"=>"Ciconia ciconia",
"Spoonbill"=>"Platalea leucorodia",
"Red-crested Pochard"=>"Netta rufina",
.
.
.
"Solitary Sandpiper"=>"Tringa solitaria",
"Heuglin's Gull"=>"Larus heuglini"
);
 
foreach ($items as $key=>$value) {
	if (strpos(strtolower($key), $q) !== false) {
		echo "$key|$value\n";
	}
}
[PHP] pobierz, plaintext

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type='text/javascript' src='../lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='../lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='../lib/thickbox-compressed.js'></script>
<script type='text/javascript' src='../jquery.autocomplete.js'></script>
<script type='text/javascript' src='localdata.js'></script>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="../lib/thickbox.css" />
 
<script type="text/javascript">
$().ready(function() {
 
	function log(event, data, formatted) {
		$("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
	}
 
	function formatItem(row) {
		return row[0] + " (<strong>id: " + row[1] + "</strong>)";
	}
	function formatResult(row) {
		return row[0].replace(/(<.+?>)/gi, '');
	}
 
	$("#suggest1").focus().autocomplete(cities);
	$("#month").autocomplete(months, {
		minChars: 0,
		max: 12,
		autoFill: true,
		mustMatch: true,
		matchContains: false,
		scrollHeight: 220,
		formatItem: function(data, i, total) {
			// don't show the current month in the list of values (for whatever reason)
			if ( data[0] == months[new Date().getMonth()] ) 
				return false;
			return data[0];
		}
	});
	$("#suggest13").autocomplete(emails, {
		minChars: 0,
		width: 310,
		matchContains: "word",
		autoFill: false,
		formatItem: function(row, i, max) {
			return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
		},
		formatMatch: function(row, i, max) {
			return row.name + " " + row.to;
		},
		formatResult: function(row) {
			return row.to;
		}
	});
	$("#singleBirdRemote").autocomplete("search.php", {
		width: 260,
		selectFirst: false
	});
	$("#suggest14").autocomplete(cities, {
		matchContains: true,
		minChars: 0
	});
	$("#suggest3").autocomplete(cities, {
		multiple: true,
		mustMatch: true,
		autoFill: true
	});
	$("#suggest4").autocomplete('search.php', {
		width: 300,
		multiple: true,
		matchContains: true,
		formatItem: formatItem,
		formatResult: formatResult
	});
	$("#imageSearch").autocomplete("images.php", {
		width: 320,
		max: 4,
		highlight: false,
		scroll: true,
		scrollHeight: 300,
		formatItem: function(data, i, n, value) {
			return "<img src='images/" + value + "'/> " + value.split(".")[0];
		},
		formatResult: function(data, value) {
			return value.split(".")[0];
		}
	});
	$("#tags").autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"], {
		width: 320,
		max: 4,
		highlight: false,
		multiple: true,
		multipleSeparator: " ",
		scroll: true,
		scrollHeight: 300
	});
 
 
	$(":text, textarea").result(log).next().click(function() {
		$(this).prev().search();
	});
	$("#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]);
	});
    $("#suggest15").autocomplete(cities, { scroll: true } );
	$("#scrollChange").click(changeScrollHeight);
 
	$("#thickboxEmail").autocomplete(emails, {
		minChars: 0,
		width: 310,
		matchContains: true,
		highlightItem: false,
		formatItem: function(row, i, max, term) {
			return row.name.replace(new RegExp("(" + term + ")", "gi"), "<strong>$1</strong>") + "<br><span style='font-size: 80%;'>Email: &lt;" + row.to + "&gt;</span>";
		},
		formatResult: function(row) {
			return row.to;
		}
	});
 
	$("#clear").click(function() {
		$(":input").unautocomplete();
	});
});
 
function changeOptions(){
	var max = parseInt(window.prompt('Please type number of items to display:', jQuery.Autocompleter.defaults.max));
	if (max > 0) {
		$("#suggest1").setOptions({
			max: max
		});
	}
}
 
function changeScrollHeight() {
    var h = parseInt(window.prompt('Please type new scroll height (number in pixels):', jQuery.Autocompleter.defaults.scrollHeight));
    if(h > 0) {
        $("#suggest1").setOptions({
			scrollHeight: h
		});
    }
}
 
function changeToMonths(){
	$("#suggest1")
		// clear existing data
		.val("")
		// change the local data to months
		.setOptions({data: months})
		// get the label tag
		.prev()
		// update the label tag
		.text("Month (local):");
}
</script>
 
</head>
 
<body>
 
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Demo</h1>
 
<div id="content">
 
	<form autocomplete="off">
		<p>
			<label>Single City (local):</label>
			<input type="text" id="suggest1" />
			<input type="button" value="Get Value" />
			<input type="button" value="Change Max Items" onclick="changeOptions();" />
			<input type="button" value="Change to Month Data" onclick="changeToMonths();" />
			<input type="button" value="Change scroll height" id="scrollChange" />
		</p>
		<p>
			<label>Month (local):</label>
			<input type="text" id="month" />
			<input type="button" value="Get Value" />
			(Current month is excluded from list)
		</p>
		<p>
			<label>E-Mail (local):</label>
			<input type="text" id="suggest13" />
			<input type="button" value="Get Value" />
		</p>
		<p>
			<label>Single Bird (remote):</label>
			<input type="text" id="singleBirdRemote" />
			<input type="button" value="Get Value" />
		</p>
		<p>
			<label>Hidden input</label>
			<input />
		</p>
		<p>
			<label>Single City (contains):</label>
			<input type="text" id="suggest14" />
			<input type="button" value="Get Value" />
		</p>
		<p>
			<label>Multiple Cities (local):</label>
			<textarea id='suggest3' cols='40' rows='3'></textarea>
			<input type="button" value="Get Value" />
		</p>
		<p>
			<label>Multiple Birds (remote):</label>
			<textarea id='suggest4'></textarea>
			<input type="button" value="Get Value" />
		</p>
		<p>
			<label>Hidden input</label>
			<textarea></textarea>
		</p>
    <p>
			<label>Image search (remote):</label>
			<input type="text" id='imageSearch' />
			<input type="button" value="Get Value" />
		</p>
    <p>
			<label>Tags (local):</label>
			<input type="text" id='tags' />
			<input type="button" value="Get Value" />
		</p>
		<p>
			<label>Some dropdown (&lt;3 IE):</label>
			<select>
				<option value="">Item 12334455</option>
				<option value="2">Item 2</option>
				<option value="3">Item 3</option>
				<option value="4">Item 4</option>
			</select>
		</p>
 
		<input type="submit" value="Submit" />
	</form>
 
	<p>
		<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)
	</p>		
 
	<div id="modalWindow" style="display: none;">
                <p>
                        <label>E-Mail (local):</label>
                        <input type="text" id="thickboxEmail" />
                        <input type="button" value="Get Value" />
                </p>
		</div>
 
	<button id="clear">Remove all autocompletes</button>
 
	<a href="search.phps">PHP script used to for remote autocomplete</a>
 
	<h3>Result:</h3> <ol id="result"></ol>
 
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2623402-1";
urchinTracker();
</script>
</body>
</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 
$(document).ready(function() { 
		$("input[name='company_name']").autocomplete(base_url+"/shop/bill/client");
	});
[JAVASCRIPT] pobierz, plaintext

a metoda client wyswietla dane w takim formacie:

[HTML] pobierz, plaintext 
1|Jan|Kowalski
2|Andrzej|Nowak
3|Karol|Przykładowy
[HTML] pobierz, plaintext

a pole na którym chciałbym zrobic wyszukiwanie jest następująco zadelkarowane:

[HTML] pobierz, plaintext 
<input type="text" name="company_name" value="" id="company_name" />
[HTML] pobierz, plaintext

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.