/* ================================================================================================
suggestions-v1.0.js
Biblioteka Suggestions sluzy do wyswietlania podpowiedzi przy wpisywaniu danej frazy w formularzu w elemencie
'input'. Podpowiedzi pobierane sa z bazy danych na podstawie wpisywanej frazy - tzn. wybierane sa te, ktore
zaczynaja sie od wprowadzanej frazy. Popdowiedzi pobierane sa w tle przy uzyciu technologii AJAX.
Wybor nastepuje poprzez klikniecie myszka na dana podpowiedz lub poprzez wcisniecie przycisku 'enter'
z klawiatury po uprzednim wyborze za pomocą strzałek 'w górę' oraz 'w dół' z klawiatury.
Uwaga:
Biblioteka obejmuje tylko slrypty po stronie klienta. Nalezy wiec samemu napisac skrytp dzialajacy po stronie
serwera, ktory pobierze z bazy danych odpowiednie dane.
JAK UZYWAC:
1. Na poczatku nalezy zalaczyc te biblioteke w sekcji strony:
2. Element , do ktorego maja odnosic sie podpowiedzi, nalezy umiescic w elemencie blokowym
, ktoremu
nalezy nadac styl "position: relative":
3. Za elementem nalezy wstawic element blokowy
i nadac mu niepowtarzalny atrybut "id":
Pamietajmy o zamknieciu tego elementu!
4. W elemencie musimy wstawic funkcje:
init ( in_id, suggestion_container, link, event ) , gdzie: in_id - element - najlepiej wpisac 'this' bez cudzyslowow;
suggestion_container - id elementu
, ktoremu nadalismy
id "jakis_niepowtarzalny_id";
link - sciezka do pliku se skrytpem wykonywanym po stronie
serwera
event - obiekt zdarzenia, wpisujemy 'event' bez cudzyslowow;
hide ( suggestion_container ) ,gdzie suggestion_container - id elementu
, ktoremu nadalismy
id "jakis_niepowtarzalny_id";
dla zdarzen:
5. Teraz nalezy ustalic odpowiednie style dla tworzonych w bibiotece elementow. Nalezy po prostu zmodyfikowac
style znajdujace sie wewnatrz nastepujacych funkcji w bibliotece:
setSuggContStyles ( sc ) - ustawia style pola, w ktorym beda wyswietlane podpowiedzi; nalezy pamietac
o odpowiednim wypozycjonowaniu tego pola za pomoca stylow "top" oraz "left"
setLineStyles ( ) - ustawia style dla pojedynczego wiersza w polu z podpowiedziami, czyli
dla pojedynczej podpowiedzi
setHighlightLineStyles ( ) - ustawia style dla pojedynczego wiersza, kiedy ten jest zaznaczony
poprzez najechanie myszka albo poprzez wciskanie klawiszy strzalek
'w gore' i 'w dol'.
Sa to pierwsze trzy funkcje w bibliotece, dlatego latwo jest je odnalezc.
To wszystko. Teraz powinno dzialac.
================================================================================================== */
// ZMIENNE GLOBALNE
var suggestions = new Array();
var last_id = 100;
var id = -1;
var max = -1;
var input_id = "";
var sugg_cont = "";
var url = "";
var if_select = false;
// ************************
var data_div = "";
var test = "";
/**
* Ustawienie stylow dla pola z podpowiedziami.
*/
function setSuggContStyles ( sc ) {
// Tego lepiej nie zmieniac
sc.style.display = "none";
sc.style.position = "absolute";
sc.style.zIndex = "200";
// To juz mozna zmieniac do woli
sc.style.width = "250px";
sc.style.color = "#000000";
sc.style.fontFamily = "tahoma";
sc.style.fontSize = "12px";
sc.style.backgroundColor = "#eff8fe";
sc.style.border = "1px solid #c0c9cf";
sc.style.top = "20px";
sc.style.left = "0px";
// Mozna tez dodawac swoje style, ktorych tutaj nie ma
}
/**
* Ustawienie stylow dla jednej linii z podpowiedziami.
*/
function setLineStyles ( ) {
var style = 'style="';
// Tu mozna ustawiac style
style += 'height: 25px;';
style += 'line-height: 25px;';
style += 'clear: both;';
style += 'margin-left: 5px;';
style += 'margin-right: 5px;';
style += 'overflow: hidden;';
style += 'cursor: pointer;';
// koniec mozliwosci ustawiania styli
style += '"';
return style;
}
/**
* Ustawienie stylow dla jednej linii z podpowiedziami, ktora jest aktualnie podswietlona.
*/
function setHighlightLineStyles ( element ) {
element.style.backgroundColor = "#6e8798";
element.style.color = "#ffffff";
}
/**
* Funkcja inicjalizujaca zmienne rozpoczynajaca i dzialanie mechanizmu wyswietlania i obslugi podpowiedzi.
*/
function init ( in_id, suggestion_container, dane_placowki, link, event ) {
// inicjalizacja zmiennych globalnych
input_id = in_id;
sugg_cont = document.getElementById(suggestion_container);
url = link;
data_div = document.getElementById(dane_placowki);
test = dane_placowki;
// ustawienie opdowiednich styli
if ( sugg_cont.style.display != "block" )
setSuggContStyles(sugg_cont);
if ( event )
suggest ( event );
else
suggest ( window.event );
}
/**
* Funkcja ukrywa pole z podpowiedziami.
*/
function hide ( suggestion_container ) {
if ( !if_select ) {
sc = document.getElementById(suggestion_container);
sc.style.display = "none";
last_id = 100;
id = -1;
}
}
/**
* Funkcja przekazuje do elementu input wybrana podpowiedz po kliknieciu myszka
* na dana podpowiedz.
*/
function selectByClickMouse( chosen_div ) {
input_id.value = chosen_div.innerHTML;
input_id.focus();
sugg_cont.style.display = "none";
last_id = 100;
id = -1;
if_select = false;
getClinicData( chosen_div.innerHTML, 'ajax/danePlacowki.php' );
}
/**
* Funkcja przekazuje do elementu input wybrana podpowiedz po wcisnieciu
* klawisza 'enter' przy zaznaczeniu odpowiedniej podpowiedzi.
*/
function selectByClickEnter ( ) {
chosen_div = document.getElementById('podp'+id);
input_id.value = chosen_div.innerHTML;
input_id.focus();
sugg_cont.style.display = "none";
last_id = 100;
id = -1;
getClinicData( chosen_div.innerHTML, 'ajax/danePlacowki.php' );
}
/**
* Funkcja pokazuje podpowiedzi pobrane z bazy danych.
*/
function showSuggestions ( text ) {
max = -1;
var str = "";
style = setLineStyles();
sugg_cont.style.display = "block";
suggestions = text.split("|!|");
for ( var i = 0; i < suggestions.length; i++ )
if ( suggestions[i].length > 0 ) {
str += '
';
str += '
';
str += suggestions[i];
str += '
';
str += '
';
max = max+1;
}
sugg_cont.innerHTML = str;
}
/**
* Funkcja wykorzystujaca techonologie AJAX do pobrania podpowiedzi z bazy danych.
*/
function suggest ( event ) {
// IE
if (event.which == null) {
if ( event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13 ) {
movingIE(event);
return;
}
}
else if (event.which > 0) {
if ( event.which == 38 || event.which == 40 || event.which == 13 ) {
movingOthers(event);
return;
}
}
var Obj = false;
if ( input_id.value.length >= 2 ) {
if ( window.XMLHttpRequest ) {
Obj = new XMLHttpRequest();
}
else if ( window.ActiveXObject ) {
Obj = new ActiveXObject("Microsoft.XMLHTTP");
}
if ( Obj ) {
Obj.open("post", url);
Obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Obj.onreadystatechange = function() {
if ( Obj.readyState == 4 && ( Obj.status == 200 || Obj.status == 304) ) {
if ( Obj.responseText.length > 0 )
showSuggestions(Obj.responseText);
else {
sugg_cont.style.display = "none";
data_div.innerHTML = "";
}
}
}
Obj.send("string="+input_id.value);
}
}
}
/**
* Funkcja zmienia wyglad aktualnie zaznaczonej podpowiedzi.
*/
function highlight ( curr_id ) {
if ( last_id == 100 ) {
setHighlightLineStyles(document.getElementById('podp'+curr_id+'_zew'));
}
else {
document.getElementById('podp'+last_id+'_zew').style.backgroundColor = "#eff8fe";
document.getElementById('podp'+last_id+'_zew').style.color = "#000000";
document.getElementById('podp'+last_id+'_zew').style.overflow = "hidden";
setHighlightLineStyles(document.getElementById('podp'+curr_id+'_zew'));
}
last_id = curr_id;
}
/**
* Funkcja wybiera na podstawie przechwyconego kodu wcisnietego klawisza ktora podpowiedz ma zostac zaznaczona.
* Funkcja przeznaczona dla przegladarki IE.
*/
function movingOthers ( event ) {
if ( event.which == 38 )
moveUp();
else if ( event.which == 40 )
moveDown();
else if ( event.which == 13 )
selectByClickEnter();
}
/**
* Funkcja wybiera na podstawie przechwyconego kodu wcisnietego klawisza ktora podpowiedz ma zostac zaznaczona.
* Funkcja przeznaczona dla przegladarek innych niz IE.
*/
function movingIE ( event ) {
if ( event.keyCode == 38 )
moveUp();
else if ( event.keyCode == 40 )
moveDown();
else if ( event.keyCode == 13 )
selectByClickEnter();
}
/**
* Funkcja zaznacza wyzsza podpowiedz i odznaczna podpowiedz poprzednia.
*/
function moveUp ( ) {
if ( last_id == 0 )
id = max;
else if ( (last_id - 1) >= 0 )
id = last_id - 1;
document.getElementById('podp'+last_id+'_zew').style.backgroundColor = "#eff8fe";
document.getElementById('podp'+last_id+'_zew').style.color = "#000000";
setHighlightLineStyles ( document.getElementById('podp'+id+'_zew') );
last_id = id;
}
/**
* Funkcja zaznacza nizsza podpowiedz i odznaczna podpowiedz poprzednia.
*/
function moveDown ( ) {
if ( last_id == 100 ) {
id = 0;
setHighlightLineStyles ( document.getElementById('podp'+id+'_zew') );
last_id = id;
return;
}
else if ( (last_id + 1) <= max )
id = last_id + 1;
else
id = 0;
document.getElementById('podp'+last_id+'_zew').style.backgroundColor = "#eff8fe";
document.getElementById('podp'+last_id+'_zew').style.color = "#000000";
setHighlightLineStyles ( document.getElementById('podp'+id+'_zew') );
last_id = id;
}
// ***********************************************************************************************************************************
function getClinicData ( text, url ) {
var Obj = false;
if ( window.XMLHttpRequest ) {
Obj = new XMLHttpRequest();
}
else if ( window.ActiveXObject ) {
Obj = new ActiveXObject("Microsoft.XMLHTTP");
}
if ( Obj ) {
Obj.open("post", url );
Obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Obj.onreadystatechange = function() {
if ( Obj.readyState == 4 && ( Obj.status == 200 || Obj.status == 304) ) {
if ( Obj.responseText != 'nic' )
showData(Obj.responseText);
showCheckBox();
}
}
Obj.send("string="+text);
}
}
function showData ( text ) {
data_div.innerHTML = "";
data = text.split("|!|");
var str = '
';
str += data[0]+' '+data[1];
str += '
';
str += '
';
str += 'woj. '+data[2];
str += '
';
data_div.innerHTML = str;
}
function showCheckBox ( ) {
var checkbox, text, div;
// tworzenie diva
div = document.createElement('div');
div.id = "new_div";
document.getElementById(test).appendChild(div);
// tworzenie checkboxa
checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "czyDopisac";
checkbox.value = "tak";
checkbox.id = "new_check";
document.getElementById('new_div').appendChild(checkbox);
// tworzenie tekstu
text = document.createTextNode(" Dopisz mnie do tej placówki");
document.getElementById('new_div').appendChild(text);
}
function sprawdz_login ( input ) {
var Obj = false;
if ( window.XMLHttpRequest ) {
Obj = new XMLHttpRequest();
}
else if ( window.ActiveXObject ) {
Obj = new ActiveXObject("Microsoft.XMLHTTP");
}
if ( Obj ) {
Obj.open("post", "ajax/sprawdz_login.php" );
Obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Obj.onreadystatechange = function() {
if ( Obj.readyState == 4 && ( Obj.status == 200 || Obj.status == 304) ) {
if ( Obj.responseText == 'zajety' )
alert('Podany login jest juz zajety. Musisz wybrac inny.');
}
}
Obj.send("string="+input.value);
}
}
document.write('');