Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [ajax] wyszukiwanie dynamiczne
Forum PHP.pl > Forum > XML, AJAX
jakis_login
Witam.
Mam taki problem: mam plik html i input do wpisywania wartosci:
Kod
    <form id="fromWojewodztwo" onsubmit="return false;" >
            <div>    
                Szukaj: <input type="text" id="kontakt" autocomplete="off"/>
                <div id="suggestBoxField"></div>
            </div>    
    </form>
    <div id="tekst"></div>

w drugim pliku js mam:
Kod
window.onload = init;
var XMLMainElement = null;
function init(){
    document.getElementById("kontakt").onkeyup = function(evt) {
        showBox(evt);
    }
    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", "wojewodztwatest.php" + "?random=" + Math.random(), true);
        
        XHR.onreadystatechange = function() {

            if (XHR.readyState == 4) {
                if (XHR.status == 200) {
                    XMLMainElement = XHR.responseXML.documentElement;
                }
                else alert("Wystapil blad" + XHR.status);
            }
        }
        
        XHR.send(null);
    }
}
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:
Kod
<?php

    $link = @mysql_connect("localhost", "root", "") or die("nie udało się połączyć");
        
    @mysql_select_db("kontakty") or die ("nie udało się wybrać bazy danych");
    mysql_query("SET NAMES 'utf8'");

    $result = mysql_query("SELECT Imie FROM kontakty") or die("nie udało się pobrać danych");
    
    header("Content-type: text/xml");
    
    echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
    
    echo "<Kontakty>";
    
    while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
        echo "<Kontakt>";
        foreach($row as $klucz => $wartosc){
            if ($klucz == "Imie")
                echo "<Imie>".$wartosc."</Imie>";
        }    
        echo "</Kontakt>";
    }
    
    echo "</Kontakty>";
    
    mysql_close($link);
?>

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?
chomiczek
spróbuj przy wczytywaniu strony utworzyć jakąś tablicę, która będzie przechowywała imiona, a następnie dodać zdarzenie do clicka w formularz..później sprawdziłbym czy jest jakaś wartość wpisana (różna od spacji, etc) i dopiero wtedy robić funkcję suggest.

BTW.. ja używam czegoś takiego dosyć często: http://bassistance.de/jquery-plugins/jquer...n-autocomplete/
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.