[AJAX, PHP] dynmiczne wyszukiwanie z bazy

boleq · 5 Październik 2010 17:17

Witam.

Mam taki problem: mam plik html i input do wpisywania wartosci:

Szukaj:

[/code] w drugim pliku js mam:

[code] //inicjalizacja ajax itp. function showBox(evt){ var evt = (evt) ? evt : window.event; if (XMLMainElement != null){ document.getElementById(“suggestBoxField”).innerHTML = ‘’; document.getElementById(“kontakt”).className = ‘’; var kontakty = XMLMainElement.getElementsByTagName(“Kontakt”); for (var i = 0; i < kontakty.length; i++) { if (kontakty[i].getElementsByTagName(“Imie”)[0].firstChild.nodeValue.toLowerCase().indexOf(document.getElementById(“kontakt”).value.toLowerCase()) ==0){ var suggestBoxField = document.getElementById(“suggestBoxField”); suggestBoxField.style.visibility = ‘visible’; var tmpDiv = document.createElement(“div”); tmpDiv.innerHTML = kontakty[i].getElementsByTagName(“Imie”)[0].firstChild.nodeValue;//to co sie ma wyswietlac suggestBoxField.appendChild(tmpDiv); } } } }
i w trzecim php:

<?php


	//poloczenie do bazy itp.


	while($row = mysql_fetch_array($result, MYSQL_ASSOC)){

		echo "";

		foreach($row as $klucz => $wartosc){

			if ($klucz == "Imie")

			    echo "".$wartosc."";

		}	

		echo "";

	}


?>

ten przykład to pobieranie z bazy w tym przypadku imion, dynamicznie, podczas wpisywania do inputa wartości i wyświetlanie ich podczas wpisywania. I teraz pytanie - jak zrobić aby na początku wyświetlała się cała baza imion(nie jak do tej pory ze dopiero się pokazuja imiona po wpisaniu czegos) i dopiero wtedy już po wczytaniu całej bazy zaczyna się dynamiczne filtrowanie?

mario_210454387 · 7 Październik 2010 05:42

Coś na szybko

var XMLMainElement = null;


    window.onload = init;


    function init()

     {

       document.getElementById("kontakt").onkeyup = function() 

       {

          showBox(this.value);

       }

       suggestBox()

    }


    function ajaxInit() {

       var XHR = null;


       try {

          XHR = new XMLHttpRequest();

       }

       catch(e){

          try{

             XHR = new ActiveXObject("Msxml2.XMLHTTP");

          }

          catch(e2){

             try{

                XHR = new ActiveXObject("Microsoft.XMLHTTP");

             }

             catch(e3){

                alert("blad inicjalizacji ajax");

             }

          }

       }

       return XHR;   

    }

    function suggestBox() {

       var XHR = ajaxInit();

       if (XHR != null) {

          XHR.open("GET", "a.xml" + "?random=" + Math.random(), true);


          XHR.onreadystatechange = function() {


             if (XHR.readyState == 4) {

                if (XHR.status == 200) {

                   XMLMainElement = XHR.responseXML.documentElement;

                   showBox("");

                }

                else alert("Wystapil blad" + XHR.status);

             }

          }


          XHR.send(null);

       }

    }

function showBox(tresc){



          document.getElementById("suggestBoxField").innerHTML = '';

          document.getElementById("kontakt").className = '';


        if (XMLMainElement != null)

        { 

          var kontakty = XMLMainElement.getElementsByTagName("Kontakt");

          var suggestBoxField = document.getElementById("suggestBoxField");




             for (var i = 0; i < kontakty.length; i++) 

             {

				 if(tresc.replace(/\s/g,"") == "")

				 {

					suggestBoxField.style.visibility = 'visible';


					var tmpDiv = document.createElement("div");

						tmpDiv.innerHTML = kontakty[i].getElementsByTagName("Imie")[0].firstChild.nodeValue;//to co sie ma wyswietlac

					suggestBoxField.appendChild(tmpDiv);

				 }

				 else if (kontakty[i].getElementsByTagName("Imie")[0].firstChild.nodeValue.toLowerCase().indexOf(tresc.toLowerCase()) ==0)

				{

						suggestBoxField.style.visibility = 'visible';


						var tmpDiv = document.createElement("div");

						tmpDiv.innerHTML = kontakty[i].getElementsByTagName("Imie")[0].firstChild.nodeValue;//to co sie ma wyswietlac

						suggestBoxField.appendChild(tmpDiv);

				}


            }            

         }

    }

boleq · 7 Październik 2010 13:12

Ok działa dzięki powiedz jeśli możesz, bo chce aby dane były w

mario_210454387 · 7 Październik 2010 13:46

bo chce aby dane były w Rozchodzi się o podpowiedzi? function showBox(tresc) { document.getElementById(“suggestBoxField”).innerHTML = ‘’; document.getElementById(“kontakt”).className = ‘’; if (XMLMainElement != null) { var kontakty = XMLMainElement.getElementsByTagName(“Kontakt”); var suggestBoxField = document.getElementById(“suggestBoxField”); var tabela = document.createElement(“table”); tabela.setAttribute(“border”,“1”);//obramowanie tabeli var tabelaBody = document.createElement(“tbody”); for (var i = 0; i < kontakty.length; i++) { var tr = document.createElement(“tr”); var td = document.createElement(“td”); if(tresc.replace(/\s/g,"") == “”) { suggestBoxField.style.visibility = ‘visible’; td.innerHTML = kontakty[i].getElementsByTagName(“Imie”)[0].firstChild.nodeValue;//to co sie ma wyswietlac tr.appendChild(td); tabelaBody.appendChild(tr); } else if (kontakty[i].getElementsByTagName(“Imie”)[0].firstChild.nodeValue.toLowerCase().indexOf(tresc.toLowerCase()) ==0) { suggestBoxField.style.visibility = ‘visible’; td.innerHTML = kontakty[i].getElementsByTagName(“Imie”)[0].firstChild.nodeValue;//to co sie ma wyswietlac tr.appendChild(td); tabelaBody.appendChild(tr); } } tabela.appendChild(tabelaBody); suggestBoxField.appendChild(tabela); } } To zależy czy samo nazwisko będzie do czegoś potrzebne. Jeżeli nie to połącz je ale nie w bazie tylko po pobraniu danych zapisz imię i nazwisko obok siebie w jednym tagu .

boleq · 7 Październik 2010 18:08

taa tylko czy da się ustawić teraz atrybuty tabeli nie tak:

tabela.setAttribute("border","1");//obramowanie tabeli

tylko w np w css czy wszystko trzeba teraz w js?

Nie wiem czy dobrze się rozumiemy odnośnie tego(albo ja się zakręciłem), ze mogę wpisywać w wyszukiwarke imie i nazwisko np wpisuje “jan nowak” a nie jak do tej pory tylko “jan”

mario_210454387 · 7 Październik 2010 20:03

Do tabeli można się odwołać (w css) poprzez element nadrzędny (

) ale wygodniej będzie dodać do tabeli klasę. Zastąp to

tabela.setAttribute("border","1");//obramowanie tabeli

tym (oczywiście nazwa klasy jest dowolna - podpowiedzi)

tabela.setAttribute("class","podpowiedzi");

W tym wypadku do tabeli w css odwołujesz się poprzez .podpowiedzi{}

function showBox(tresc)

{

	document.getElementById("suggestBoxField").innerHTML = '';

	document.getElementById("kontakt").className = '';


	if (XMLMainElement != null)

	{

		var kontakty = XMLMainElement.getElementsByTagName("Kontakt");

		var suggestBoxField = document.getElementById("suggestBoxField");

		var tabela = document.createElement("table");

			tabela.setAttribute("class","podpowiedzi");

		var tabelaBody = document.createElement("tbody");


		for (var i = 0; i < kontakty.length; i++)

		{

			var tr = document.createElement("tr");

			var td = document.createElement("td");


			if(tresc.replace(/\s/g,"") == "")

			{

				suggestBoxField.style.visibility = 'visible';

				td.innerHTML = kontakty[i].getElementsByTagName("Imie")[0].firstChild.nodeValue;//to co sie ma wyswietlac

				tr.appendChild(td);

				tabelaBody.appendChild(tr);      

			}

			else if (kontakty[i].getElementsByTagName("Imie")[0].firstChild.nodeValue.toLowerCase().indexOf(tresc.toLowerCase()) >= 0)

			{

				var txt = kontakty[i].getElementsByTagName("Imie")[0].firstChild.nodeValue;

				var poz = txt.toLowerCase().indexOf(tresc.toLowerCase());


				suggestBoxField.style.visibility = 'visible';       

				td.innerHTML = txt.substring(0,poz)+txt.substr(poz,tresc.length).bold()+txt.substring(poz+tresc.length,txt.length);//to co sie ma wyswietlac    

				tr.appendChild(td);

				tabelaBody.appendChild(tr);

			}

		}

		tabela.appendChild(tabelaBody);

		suggestBoxField.appendChild(tabela);

	}

}

Teraz możesz wyszukiwać po dowolnym ciągu znaków (więc czy zaczniesz od imienia/nazwiska/dowolnego miejsca to będzie to obojętne) + dopisałem coś dodatkowo do kodu (podświetlanie pasujących fraz). Oczywiście w pliku php musisz z bazy pobrać dodatkowo nazwisko i dopisać je do

echo "".$wartosc."";

czyli np.

echo "".$imie." ".$nazwisko."";

boleq · 8 Październik 2010 08:54

Hmmm. Odnośnie ustawień tabeli w css to ok. Natomiast nie chodzi mi o wpisywanie po dowolnym znaku tylko po kolei np Jan Kowalski (jak było przedtem), chodzi aby można było wpisywać zaraz po imieniu także nazwisko i ono też żeby się wyświetlało podczas wpisywania a było umieszczone w drugiej kolumnie tabeli

mario_210454387 · 8 Październik 2010 10:30

function showBox(tresc)

{

	document.getElementById("suggestBoxField").innerHTML = '';

	document.getElementById("kontakt").className = '';


	if (XMLMainElement != null)

	{

		var kontakty = XMLMainElement.getElementsByTagName("Kontakt");

		var suggestBoxField = document.getElementById("suggestBoxField");

		var tabela = document.createElement("table");

			tabela.setAttribute("class","podpowiedzi");

		var tabelaBody = document.createElement("tbody");


		for (var i = 0; i < kontakty.length; i++)

		{

			var dane = kontakty[i].getElementsByTagName("Imie")[0].firstChild.nodeValue+" "+kontakty[i].getElementsByTagName("Nazwisko")[0].firstChild.nodeValue;


			var tr = document.createElement("tr");

			var td1 = document.createElement("td");

			var td2 = document.createElement("td");


			if(tresc.replace(/\s/g,"") == "")

			{

				suggestBoxField.style.visibility = 'visible';

				td1.innerHTML = kontakty[i].getElementsByTagName("Imie")[0].firstChild.nodeValue;//to co sie ma wyswietlac

                td2.innerHTML = kontakty[i].getElementsByTagName("Nazwisko")[0].firstChild.nodeValue;

                tr.appendChild(td1);

                tr.appendChild(td2);

                tabelaBody.appendChild(tr);     

			}

			else if (dane.toLowerCase().indexOf(tresc.toLowerCase()) == 0)

			{

				suggestBoxField.style.visibility = 'visible';

				td1.innerHTML = kontakty[i].getElementsByTagName("Imie")[0].firstChild.nodeValue;//to co sie ma wyswietlac 

				td2.innerHTML = kontakty[i].getElementsByTagName("Nazwisko")[0].firstChild.nodeValue;

                tr.appendChild(td1);

                tr.appendChild(td2);

                tabelaBody.appendChild(tr);

			}

		}

		tabela.appendChild(tabelaBody);

		suggestBoxField.appendChild(tabela);

	}

}

Nazwisko zwracasz z pliku php w tagu .

boleq · 8 Październik 2010 12:51

Działa wyśmienicie Bardzo dziękuję za pomoc. Więcej tak zaangażowanych ludzi na forum…