Forum PHP.pl > Wyszukiwanie jQuery bez przeładowania

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Wyszukiwanie jQuery bez przeładowania

lukasheek88

8.01.2015, 19:29:18

Witam wszystkich,
mam pewien problem, a mianowicie mam tabelkę składającą się z 10 wierszy. W pierwszej kolumnie są inputy gdzie wprowadzam pewien indeks, w drugiej kolumnie chciałbym mieć wynik wyszukania danego indeksu. Chciałbym by to wszystko wyszukiwało się bez przeładowania strony za pomocą jQuery. Czyli wpisuje w pierwszym inpucie jakiś indeks, w drugiej kolumnie dla tego indeksu wyświetla mi wynik, itd, drugi i kolejny wiersz tak samo, wpisuje w inpucie indeks a w drugiej kolumnie wstawia mi wynik zapytania. Jak coś takiego zrobić?
Mam coś takiego:
formularz:

[HTML] pobierz, plaintext 
<html>
 <head>
 <script type="text/javascript" src="style/js/wybor.js"></script>
</head>
<body>
 
<form>
<table>
<tr><td>
<input type="text" name="rekord1" onKeyUp="showPart(this.value)">
</td><td><div id="informacja1">Wynik:</div></td></tr>
 
</table>
</form>
 
 
</body>
</html> 
[HTML] pobierz, plaintext

Plik odpowiedzialny za zapytanie do bazy:

[PHP] pobierz, plaintext 
$query = "SELECT * FROM tabela WHERE indeks LIKE '%".$part."%'";
$wyniki = mysql_query($query);
 
while($wiersz=mysql_fetch_array($wyniki))
{
echo $wiersz['wynik'];
}
[PHP] pobierz, plaintext

oraz plik wybor.js
var xmlhttp;

[HTML] pobierz, plaintext 
function showPart(str)
{
xmlhttp=GetXmlHttpObject();
var url="baza.php";
url=url+"?part="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
 
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("informacja1").innerHTML=xmlhttp.responseText;
document.getElementById("informacja2").innerHTML=xmlhttp.responseText;
document.getElementById("informacja3").innerHTML=xmlhttp.responseText;
}
}
 
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
 {
 return new XMLHttpRequest();
 }
return null;
}
 
[HTML] pobierz, plaintext

trueblue

8.01.2015, 19:50:21

Z jQuery niewiele ma to wspólnego.
Chcesz wszystkie rekordy spełniającego warunek wyświetlić w tym jednym polu? Jeśli nie, to dlaczego w skrypcie php jest pętla while?
Brak jest pozostałych input i div.
Czy w przypadku modyfikacji jednego input mają być odczytywane również pozostałe i aktualizowane wyniki?

lukasheek88

8.01.2015, 19:56:02

Faktycznie,
powinienem dopisać jeszcze dwa wiersze oraz div dla informacja2 i informacja3. Ale jak tak zrobilem to zmiana w pierwszym inpucie powoduje zmianę w każdym divie. Chciałbym by zmiana w pierwszym divie zmieniała dane w divie informacja1, zmiana w drugim inpucie zmieniała dane w divie informacja2 itd....

trueblue

8.01.2015, 20:02:56

http://jsfiddle.net/01qob0qt/

Ale jeśli będziesz miał więcej rekordów, to będzie to bardzo kłopotliwe, szczególnie, że nie ułatwiasz sobie korzystając z jQuery.

lukasheek88

8.01.2015, 22:03:10

A z czego korzystać by nie było to kłopotliwe?
Chce mieć tabelkę i w niej inputy a po wprowadzeniu indeksu w kolumnie obok do kazdego inputu dopasowywala by mi sie wartosc z bazy danych. Coś jak funkcja wyszukaj.pionowo w excelu.

trueblue

8.01.2015, 22:20:33

Z jQuery, o którym wspominałem dwukrotnie.
Pomimo niezastosowania, sprawdziłeś przykład, który podałem?

lukasheek88

9.01.2015, 17:57:03

Sprawdziłem, nie działa.

trueblue

9.01.2015, 17:59:07

Przeniosłeś kod do siebie? Co dokładnie nie działa?

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.