Widziałem kilka projektów AJAX typu suggestion tool i sam postanowiłem zbudować podobny w oparciu o bibliotekę advAJAX.
Działanie jest proste - użytkownik wpisuje słowo, jeśli w bazie danych są podobne, to wyświetlane jest okno podpowiedzi, jesli nie,
to musi sam dokończyć wpisywanie
. Następnie słowo to dodawane jest do bd (jeśli go nie było).Efekt pracy przedstawię poniżej, ale nie jest to w 100% działający projekt, ponieważ po wyborze słowa (jak są polskie litery, np. brązowy),
a następnie skasowaniu z niego kilku ostatnich liter - w oknie podpowiedzi nie wyświetla się nic, dopóki są polskie litery (miły wyjątek stanowi przeglądarka IE).
Jak ktoś będzie wiedział jak to rozwiazać to proszę, oraz proszę o wypowiedzenie się na temat tego "narzędzia"...
Pliki wchodzące w skład projektu:
Oczywiście wymagany jest plik advajax.js
Baza danych z której są pobierane słowa:
Plik start.html zawierający prosty formularz:
Plik suggest.js wykorzystujący AJAX:
Kod
function $(id) {
return document.getElementById(id);
}
// zmiana koloru wiersza (onmouseover)
function highlight() {
this.className = "highlight";
}
// zmiana koloru wiersza (onmouseout)
function unHighlight() {
this.className = "unhighlight";
}
// akceptacja podpowiedzi
function selectWord() {
$("string").value = this.innerHTML;
$("suggestion").style.display = "none";
}
// konwersja dokumentu XML na elementy span
function parseRecords(xml) {
// zapisanie danych bieżącej strony
with (xml.getElementsByTagName("words").item(0)) {
var count = getAttribute("count")*1;
}
if(count == 0)
$("suggestion").style.display = "none";
// wpisanie odpowiednich słów do pola suggestion
var space = $("suggestion");
space.innerHTML = ""; // wyczyszczenie poprzedniej listy
var word = xml.getElementsByTagName("word");
for (i = 0; i < word.length; i++) {
spanNode = document.createElement("span");
spanNode.innerHTML = word[i].childNodes[0].nodeValue;
spanNode.onmouseover = highlight;
spanNode.onmouseout = unHighlight;
spanNode.onmousedown = selectWord;
space.appendChild(spanNode);
}
}
// funkcja wywołująca skrypt php i pobierająca dokument XML
function showWords() {
var string = $("string").value;
if(string) { // przy pustym polu nie następuje wysyłanie żądania
advAJAX.get({
url : "suggest.php?prefix="+$("string").value,
onInitialization : function() {
$("suggestion").style.display = "block";
},
onSuccess : function(obj) {
parseRecords(obj.responseXML);
},
onError : function(obj) {
alert("Nie można nawiązać połączenia z serwerem.");
}
});
}
else { // ukrycie warstwy
$("suggestion").style.display = "none";
}
}
return document.getElementById(id);
}
// zmiana koloru wiersza (onmouseover)
function highlight() {
this.className = "highlight";
}
// zmiana koloru wiersza (onmouseout)
function unHighlight() {
this.className = "unhighlight";
}
// akceptacja podpowiedzi
function selectWord() {
$("string").value = this.innerHTML;
$("suggestion").style.display = "none";
}
// konwersja dokumentu XML na elementy span
function parseRecords(xml) {
// zapisanie danych bieżącej strony
with (xml.getElementsByTagName("words").item(0)) {
var count = getAttribute("count")*1;
}
if(count == 0)
$("suggestion").style.display = "none";
// wpisanie odpowiednich słów do pola suggestion
var space = $("suggestion");
space.innerHTML = ""; // wyczyszczenie poprzedniej listy
var word = xml.getElementsByTagName("word");
for (i = 0; i < word.length; i++) {
spanNode = document.createElement("span");
spanNode.innerHTML = word[i].childNodes[0].nodeValue;
spanNode.onmouseover = highlight;
spanNode.onmouseout = unHighlight;
spanNode.onmousedown = selectWord;
space.appendChild(spanNode);
}
}
// funkcja wywołująca skrypt php i pobierająca dokument XML
function showWords() {
var string = $("string").value;
if(string) { // przy pustym polu nie następuje wysyłanie żądania
advAJAX.get({
url : "suggest.php?prefix="+$("string").value,
onInitialization : function() {
$("suggestion").style.display = "block";
},
onSuccess : function(obj) {
parseRecords(obj.responseXML);
},
onError : function(obj) {
alert("Nie można nawiązać połączenia z serwerem.");
}
});
}
else { // ukrycie warstwy
$("suggestion").style.display = "none";
}
}
Plik suggest.php (wywoływany przez suggest.js)
Plik add.php odpowiedzialny za dodanie słowa do bazy danych:
Oraz plik kaskadowych arkuszy stylów (css.css):
html, body{
padding: 0;
margin: 0;
font-family : Arial, sans-serif;
}
Kod
#inputBox {
border: 3px double #000;
background: #CCF;
margin: 1em;
padding: 0.5em;
}
#suggestion {
background: #FFF;
height: 100px;
width : 200px;
border: 1px solid #000;
margin: 0.1em;
position: relative;
left: 140px;
overflow : auto;
float : left;
display: none;
cursor: default;
}
#suggestion span {
display: block;
}
#string {
width : 200px;
font-size : 13px;
padding-left : 2px;
border: 1px solid #000;
}
#button {
width: 100px;
color: #FFF;
background: #000;
border: 1px solid #FFF;
}
.highlight {
background-color: #69F;
color: #FFF;
}
.unhighlight {
background-color: #FFF;
color: #000;
}
border: 3px double #000;
background: #CCF;
margin: 1em;
padding: 0.5em;
}
#suggestion {
background: #FFF;
height: 100px;
width : 200px;
border: 1px solid #000;
margin: 0.1em;
position: relative;
left: 140px;
overflow : auto;
float : left;
display: none;
cursor: default;
}
#suggestion span {
display: block;
}
#string {
width : 200px;
font-size : 13px;
padding-left : 2px;
border: 1px solid #000;
}
#button {
width: 100px;
color: #FFF;
background: #000;
border: 1px solid #FFF;
}
.highlight {
background-color: #69F;
color: #FFF;
}
.unhighlight {
background-color: #FFF;
color: #000;
}
Gdyby nie omówiona wada, byłbym zadowolony z funkcjonalności (pomimo, że wystarczy sam js, ale czego sie nie robi dla praktyki
).
