Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> advAjax - suggestion, ocenka + pomoc
JaRoPHP
post
Post #1





Grupa: Zarejestrowani
Postów: 675
Pomógł: 15
Dołączył: 7.11.2004
Skąd: Katowice

Ostrzeżenie: (0%)
-----

WITAM!!!

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) . 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:
[SQL] pobierz, plaintext 
  1. CREATE TABLE words
  2. (
  3. id int AUTO_INCREMENT,
  4. value varchar(50),
  5. PRIMARY KEY (id)
  6. )type=MyISAM;
  7.  
  8. INSERT 
  9. INTO words
  10.  VALUES("1", "czerwony");
  11. INSERT 
  12. INTO words
  13.  VALUES("2", "pomarańczowy");
  14. INSERT 
  15. INTO words
  16.  VALUES("3", "żółty");
  17. INSERT 
  18. INTO words
  19.  VALUES("4", "zielony");
  20. INSERT 
  21. INTO words
  22.  VALUES("5", "niebieski");
  23. INSERT 
  24. INTO words
  25.  VALUES("6", "błękitny");
  26. INSERT 
  27. INTO words
  28.  VALUES("7", "fioletowy");
  29. INSERT 
  30. INTO words
  31.  VALUES("8", "brązowy");
  32. INSERT 
  33. INTO words
  34.  VALUES("9", "czarny");
  35. INSERT 
  36. INTO words
  37.  VALUES("10", "piaskowy");
  38. INSERT 
  39. INTO words
  40.  VALUES("11", "granatowy");
  41. INSERT 
  42. INTO words
  43.  VALUES("12", "seledynowy");
  44. INSERT 
  45. INTO words
  46.  VALUES("13", "biały");
  47. INSERT 
  48. INTO words
  49.  VALUES("14", "purpurowy");
  50. INSERT 
  51. INTO words
  52.  VALUES("15", "różowy");
  53. INSERT 
  54. INTO words
  55.  VALUES("16", "szary");
  56. INSERT 
  57. INTO words
  58.  VALUES("17", "srebrny");
[SQL] pobierz, plaintext

Plik start.html zawierający prosty formularz:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3. <head>
  4. <title>Suggestion advAjax</title>
  5. <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  6. <script type="text/javascript" src="advajax.js"></script>
  7. <script type="text/javascript" src="suggest.js"></script>
  8. <link rel="stylesheet" href="css.css" type="text/css" />
  9. </head>
  10. <body>
  11. <div id="inputBox">
  12.       <form action="add.php" method="post">
  13.       Poszukiwana fraza: <input type="text" id="string" name="string" autocomplete="off" onkeyup="showWords(); return false;" />
  14.       <input type="submit" value="Dalej" id="button" />
  15.       </form>
  16.       <div id="suggestion"></div>
  17. </div>
  18.  
  19. </body>
  20. </html>
[HTML] pobierz, plaintext

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";
    }
}

Plik suggest.php (wywoływany przez suggest.js)
[PHP] pobierz, plaintext 
  1. <?php
  2. 	header('Content-type: text/xml; charset=iso-8859-2');
  3.  
  4. 	$dbhost = 'localhost';
  5. 	$dbuser = 'root';
  6. 	$dbpass = 'l';
  7. 	$db = 'ajax';
  8. 	$dbtable = 'words';
  9.  
  10. 	@mysql_connect($dbhost, $dbuser, $dbpass);
  11. 	@mysql_select_db($db);
  12.  
  13. 	$prefix = @$_GET['prefix'];
  14. 	$query = @mysql_query('SELECT * FROM words WHERE value LIKE "'.$prefix.'%" ORDER BY value LIMIT 0,20');
  15. 	$countRow = @mysql_num_rows($query);
  16.  
  17. 	echo '<?xml version="1.0" encoding="iso-8859-2"?>';
  18. 	echo '<words count="'.$countRow.'">';
  19. 	while ($row = @mysql_fetch_assoc($query)) {
  20. 		echo '<word>'.htmlspecialchars($row['value']).'</word>';
  21. 	}
  22. 	echo '</words>';
  23. ?>
[PHP] pobierz, plaintext

Plik add.php odpowiedzialny za dodanie słowa do bazy danych:
[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. 	$dbhost = 'localhost';
  4. 	$dbuser = 'root';
  5. 	$dbpass = '';
  6. 	$db = 'ajax';
  7. 	$dbtable = 'words';
  8.  
  9. 	@mysql_connect($dbhost, $dbuser, $dbpass);
  10. 	@mysql_select_db($db);
  11.  
  12. 	$query = @mysql_query('SELECT * FROM words WHERE value = "'.$_POST["string"].'"');
  13. 	if(@mysql_num_rows($query) ==0)	
  14. 		$query = @mysql_query('INSERT INTO words VALUES("NULL", "'.$_POST["string"].'")');
  15.  
  16. 	header("Location: start.html");
  17. ?>
[PHP] pobierz, plaintext

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;
}

Gdyby nie omówiona wada, byłbym zadowolony z funkcjonalności (pomimo, że wystarczy sam js, ale czego sie nie robi dla praktyki (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) ).

Ten post edytował JaRoPHP 15.05.2006, 08:03:24
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
mariuszn3
post
Post #2





Grupa: Zarejestrowani
Postów: 352
Pomógł: 0
Dołączył: 22.01.2006

Ostrzeżenie: (0%)
-----

Polskie znaki, w ogóle jakiekolwiek ciągi znaków jak już sugerował Ci Anakin powinenes przepuszczać przez encodeURIComponent().. ewentualnie gdy przesyłasz dane poprzez POST to zdaje się musisz juz ich tym filtrować (ale tego nie jestem na tę chwilę pewien). Też pracuj w kodowaniu utf-8.. oszczędzi Ci to wielu problemów własnie związanych z kodowaniem znaków.
Go to the top of the page
+Quote Post

Posty w temacie
- JaRoPHP   advAjax - suggestion   14.05.2006, 22:48:26
- - anAKiN   Argument Kodurl : "suggest.php?prefix=...   14.05.2006, 23:38:31
- - JaRoPHP   Dzięki anAKiN za sugestie, choć nie do końca rozum...   15.05.2006, 09:49:16
- - anAKiN   CytatCzy więc argument var1=value1 jest źle podany...   15.05.2006, 10:17:16
- - JaRoPHP   Dzięki anAKiN! A teraz moze ktoś wie, jak roz...   15.05.2006, 17:46:28
- - mariuszn3   Polskie znaki, w ogóle jakiekolwiek ciągi znaków j...   16.05.2006, 13:34:28
- - JaRoPHP   No tak, ale z kodowaniem utf-8 też są problemy - n...   16.05.2006, 18:42:43
- - dyktek   przez encodeURIComponent() musze przepuścić to co ...   19.05.2006, 10:51:39
- - mariuszn3   CytatNo tak, ale z kodowaniem utf-8 też są problem...   19.05.2006, 11:11:16
- - dyktek   no tak masz racje przez pomyłke wstawiłem to w bbc...   19.05.2006, 11:20:13

« Następny starszy · XML, AJAX · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 28.12.2025 - 08:45
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn