Loading:


    Jak zrobić AJAX suggest, podpowiedzi w AJAX PHP MySQL
    Teraz stworzymy plik suggest.js który umieścimy w katalogu js razem z prototype.js

    Kod pliku suggest.js przedstawiam poniżej.

    Dalsza czê¶æ: 1 2 3
    Napisz Artyku³

    Listing



    //KOD JavaScript pliku suggest.js

    function searchSuggest(){
    var str = escape(document.getElementById('searchinput').value);
    var myAjax = new Ajax.Request(
          'suggest.php',
          {
             method: 'get',
             parameters: "search="+str,
             onComplete: showResponse,
             onFailure: showAlert
          });
                   
    }
    function showResponse(text){
           
            var search_suggest = document.getElementById("search_suggest");
            search_suggest.style.visibility = "visible";
            var ss = document.getElementById('search_suggest')
            ss.innerHTML = '';
            var str = text.responseText.split("\n");
            for(i=0; i < str.length - 1; i++)
            { var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
                            suggest += 'onmouseout="javascript:suggestOut(this);" ';
                            suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
                            suggest += 'class="suggest_link">' + str[i] + '</div>';
                            ss.innerHTML += suggest;
                    }
           
           
           
    }
    function showAlert(MyRequest) {
            alert("Operacja nie powiodła się");
    }
    function suggestOver(div_value) {
           
            div_value.className = 'suggest_link_over';
    }
    function suggestOut(div_value) {
           
            div_value.className = 'suggest_link';
    }
    function setSearch(value) {
            var search_suggest = document.getElementById("search_suggest");
            search_suggest.style.visibility = "hidden";
            document.getElementById('searchinput').value = value;
            document.getElementById('search_suggest').innerHTML = '';
    }







    Dodano przez: igor
    Ranga: Administrator serwisu Punktów: 0
    Komentarze użytkowników
    niestety ale nie działa :( złożyłem to wszytko razem i nic, programuję na co dzień w php i pewnie coś przeoczyłem jeśli chodzi o js
    autor: mkr | 58 | 2009-01-23 20:41:47


    Musisz zainstalować firebug w Firefox bez tego zginiesz w ajax. Tam widzisz co zostało wysłane jakie błędy wyszły i co jest nie tak.
    autor: Igor | 59 | 2009-01-23 23:51:08


    dzięki, pomogło, problem był z nawiasami w pliku suggest.js, Firebug chyba zostanie moim nowym przyjacielem :) ale pojawił się inny problem: do momentu kiedy wpisuje słowo znajdujące się w bazie w okienku wyświetla się napis empty (zamiast listy pasujących slów - bo chyba tak to działa?), kiedy jednak wpiszę słowo, którego w bazie nie ma w okienku pojawia się taki komunikat: undefinedonmouseout="javascript:suggestOut(this);" onclick="javascript:setSearch(this.innerHTML);" class="suggest_link"> a wydaje się, że wlaśnie wtedy powinien pojawic sie napis empty?
    autor: mkr | 60 | 2009-01-24 00:31:07


    Podaj linka gdzie to masz ja zobaczę w którym miejscu jest błąd.
    autor: Igor | 61 | 2009-01-24 15:18:50


    Już wszystko ok, w funkcji showResponse w pętli for brakuje nawiasu otwierającego blok instrukcji, stąd wziął się problem
    autor: mkr | 64 | 2009-01-26 02:01:36


    Faktycznie dzięki za info, już poprawiłem nie wiem jak się to mogło stać.
    autor: Igor | 66 | 2009-01-26 13:29:16


    Gdzi sie wpisuje frazy i linki kture maja wyskakiwac po wpisaniu frazy w wyszukiwarke ????????
    autor: Jucu | 91 | 2009-02-13 23:02:23


    "które", a to co ma się pokazywać dajesz w bazę linki to generujesz sam albo masz w bazie, zaawansowany suggest dodatkowo prowadzi ranking słów odpowiednio je dopasowując w tej kwestii liczy się pomysłowość i wasza intencja ja tylko podałem kod z którego można zbudować dowolne podpowiedzi.
    autor: Igor | 92 | 2009-02-13 23:26:33


    Witam, Chciałem przetestować ten przykład, jednak mam problemy z jego uruchomieniem, gdyż ciągle zwracaną wartością przez suggest.php jest wartość 'empty'. Nawet przy wywołaniu suggest.php?search=a. W przykładzie autor zapomniał dodać na końcu pliku suggest.php tagu domykającego '?>'. Czy ktoś może mi pomóc ?
    autor: apache64 | 93 | 2009-02-16 15:49:23


    Tak jak wyżej sprawdź po kolei gdzie jest błąd, użyj firebug dla firefox, sprawdź tak co jest wysyłane i odbierane poprzez skrypty. Zobacz może w funcji showResponse gdzieś masz błąd.
    • Zobacz kod dodany do tego wpisu
      • function showResponse(text){      
        var search_suggest = document.getElementById("search_suggest");
                search_suggest.style.visibility = "visible";
        var ss = document.getElementById('search_suggest')
        ss.innerHTML = '';
        var str = text.responseText.split("n");
        for(i=0; i < str.length - 1; i++){
        var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
        suggest += 'onmouseout="javascript:suggestOut(this);" ';
        suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
        suggest += 'class="suggest_link">' + str[i] + '</div>';
        ss.innerHTML += suggest;
        }
    autor: Igor | 95 | 2009-02-16 17:08:47


    Właśnie się z tym uporałem. Faktycznie, okazało się, że miałem błąd w showResponse(). Dzięki.
    autor: apache64 | 97 | 2009-02-16 18:25:44


    A czy naprawdę nie prościej byłoby dołożyć na koniec tego fajnego tutka jakąś spakowaną wersję gotowca bo kurde już ma dość szukania błędu, a za każdym razem pokazuje mi w firebug'u "searchSuggest is not defined" a już wszystko sprawdziłem w tej funkcji i wygląda tak jak w poście wyżej, mógłby mi ktoś ten gotowy działający skrypt podesłać na maila sirkzzz@mail.com , naprawdę bardzo jest mi potrzebny
    autor: sirk | 125 | 2009-03-16 19:02:41


    searchSuggest is not defined oznacza ze pewnie nie zaciągnołeś js do pliku sprawdź czy na pewno ta linia kodu prowadzi do pliku suggest.js i czy ścieżka jest ok
    autor: Igor | 127 | 2009-03-16 22:11:57


    dałoby się wynik ładować tak żeby działało jak np w googlach ? żeby możnabyło wybrać strzałką odpowiedni rekord i wcisnąć ENTER ... ?
    autor: slavo | 130 | 2009-03-18 15:17:49


    a :) dało by się ale to już trochę pisania, musisz użyć zdarzenia JavaScript oddziałującego na wciśnięcie strzałka w górę i w dół i przypisać im odpowiednią funkcję która przeskakuje miedzy podpowiedziami. albo po prostu zamiast wyświetlania wyników na warstwie div użyj listy rozwijanej wtedy ten komponent sam będzie reagował na strzałki i enter. Tutaj daje ci przykładowe generowanie dla pola select
    • Zobacz kod dodany do tego wpisu
      • {
        var suggest = '<option value="' + str[i] + '" onmouseover="javascript:suggestOver(this);" ';
        suggest += 'onmouseout="javascript:suggestOut(this);" ';
        suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
        suggest += 'class="suggest_link">' + str[i] + '</option>';
        ss.innerHTML += suggest;
        }
    autor: Igor | 133 | 2009-03-18 18:58:26


    Witam hmm mam pytanko pewnie to glupie pytanie ale musicie mi wybaczyc :) poskladalem te podpowiedzi i dzialaja super! Ale nie moge jakos wpiac w nie polskich znakow. I moze odrazu powiem ze w js jestem raczej slaby... z gory dziekuje za pomoc :)
    autor: Cerber | 136 | 2009-03-19 09:52:36


    Pewnie wpisujesz do bazy ręcznie i dlatego sypie się kodowanie, jak dodasz przez normalny insert bedzie ok, lecz jest tez linia kodu która jak widzisz przekodowuje znaki na utf8, usuń tą linie i sprawdź czy zadziała (podałem ją niżej)
    • Zobacz kod dodany do tego wpisu
      • $db = lacz_bd();
        if (mysqli_connect_errno() === 0){
        $db -> query("SET NAMES 'utf8'");
        //albo ustaw na latin2
        //$db -> query("SET NAMES 'latin2'");
        }
    autor: Igor | 137 | 2009-03-19 12:03:36


    No tak taka linia kodu byla ale troche przerobilem ten plik i moj suggest.php wyglada jak nizej. Pryeprasyam ye nie dolacyzlem go odrayu wpisuje a wpisuje do bayz y pliku txt pentelka z insert into...
    • Zobacz kod dodany do tego wpisu
      • <html>
        <head META http-equiv="content-type" content="text/html; charset=iso-8859-2"><title>szukaj lekow</title>
        </head>
        <body>
        <?php
        $iCon = mysql_pconnect('localhost', 'nzoz_kp', 'pyr0blast');
        mysql_select_db('nzoz_kp', $iCon);
        $zapytanie = "SELECT `nazwa_lek`, `postac_lek`, `dawka_lek`, `opakowanie_lek` FROM leki WHERE nazwa_lek LIKE '".$_GET['search']."%' LIMIT 10";
        $result = mysql_query($zapytanie);
        while ($row = mysql_fetch_array($result, MYSQL_BOTH)) {
            print($row['nazwa_lek'].$row['postac_lek'].$row['dawka_lek'].$row['opakowanie_lek']."  n");
        }
        mysql_free_result($result);
        ?>
        </body>
        </html>
    autor: Cerber | 138 | 2009-03-19 12:25:54


    Plik może niszczyć kodowanie, zobacz co jest w bazie czy tam widac polskie znaki jeśli tak użyj tej lini kodu której dałem lecz proceduralnie bo łączysz się poprzez mysql a nie obiektowo mysqli i dostosuj kodowanie jeśli nie to wes przepuść to co ma wyświetlać przez funckje iconv opisaną u nas po polsku http://funkcje.net/view/3/1/2115/index.html
    autor: Igor | 139 | 2009-03-19 14:53:47


    Bardzo dobry zestaw skryptów, ALE: kiedy wybieram wartość, to ta wartość jest przekazywana do pola tekstowego. A co jeśli jednak nie chcę jej wybrać? Okienko warstwy pozostaje cały czas wyświetlone. Jak je zamknąć? Może użyć zdarzenia "onblur"? Macie jakieś rozwiązanie na to? itepe(@)vip.wp.pl
    autor: itepe | 153 | 2009-04-04 20:19:37


    Możesz dodać np napisz zamknij okienko i dać mu na onclick zdarzenie zamykające okno czyli style.display="none"; to najprostsze rozwiązanie
    autor: Igor | 154 | 2009-04-05 20:02:19


    Artykuł pierwsza klasa - bardzo mi pomógł. Ale funkcja escape() nie radzi sobie z kodowaniem utf8 (obcina polskie znaki) i wyszukiwanie wtedy działa nieprawidłowo. Zmieniłem ją na funkcję encodeURI() i teraz jest OK.
    autor: Adam | 189 | 2009-05-16 15:12:30


    dobra robota! wszytko ladnie dziala.mam tylko pytanko:jak mozna sie pozbyc spacji na koncu stringa?
    autor: gienek | 208 | 2009-05-25 14:10:31


    hmm widze ze ta spacja jest celowa zeby "chmurka" zniknela po wyborze.. ps jezeli mozna prosic autora o "lopatologicznie" wytlumacznie co gdzie i jak dodac opcje "zamknij" zeby miec mozliwosc zamkniecia okienka bez wyboru z gory dzieki
    autor: gienek | 209 | 2009-05-25 14:16:43


    ze spacja sobie poradzilem: $str .= $wiersz['title']." \n"; $str .= $wiersz['title']."\n";
    autor: gienek | 210 | 2009-05-25 14:28:23


    Kod zamykający podpowiedź jeśli brak wyniku, to nowa fersja funkcji showResponse wystarczy to podmienić w pliku javaScript i gotowe
    • Zobacz kod dodany do tego wpisu
      • function showResponse(text){
        if(text.responseText==''){
        var search_suggest = document.getElementById("search_suggest");
        search_suggest.style.visibility = "visible";
        var ss = document.getElementById('search_suggest');
        ss.innerHTML = '';
        }else{
        var search_suggest = document.getElementById("search_suggest");
        search_suggest.style.visibility = "visible";
        var ss = document.getElementById('search_suggest');
        ss.innerHTML = '';
        var str = text.responseText.split("n");
        for(i=0; i < str.length - 1; i++)
        { var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
        suggest += 'onmouseout="javascript:suggestOut(this);" ';
        suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
        suggest += 'class="suggest_link">' + str[i] + '</div>';
        ss.innerHTML += suggest;
        }
        }
        }
         
    autor: Igor | 215 | 2009-05-25 15:09:51


    poprawiona linia: var str = text.responseText.split("\n");. nie znam sie na js mozna by powiedziec wcale, ale nie widze roznicy miedzy pierwszym warunkiem a drugim po else, poza tym bardziej chodzi o przycisk "zamnkij" ktory zamknie podpowiedzi na zadanie uzytkownika. Dzieki za pomoc i pozdrawiam
    autor: gienek | 226 | 2009-05-26 09:26:02


    Nie linia a cała funkcja, jest różnica w warunku jak masz ze jak jest pusta odp od php to sie zamyka podpowiedz a zwykły zamknij to napisz funkcje o treści : document.getElementById("search_suggest").style.visibility = "hidden"; koniec
    • Zobacz kod dodany do tego wpisu
      • //tu masz jak zrobić link
        <a href="javascript:zamknij()">Zamknij</a>

        //tu jak zrobić funkcje
        function zamknij(){
        document.getElementById("search_suggest").style.visibility = "hidden";
        }
    autor: Igor | 228 | 2009-05-26 20:07:37


    Oto przykładowy CSS dla tego skryptu
    • Zobacz kod dodany do tego wpisu
      • #search fieldset {
                margin: 0;
                padding: 0;
                border: none;
        }
        #search legend {
                display: none;
        }
        .search {
        background:url("images/search.gif");
        border:none;
        background-repeat:no-repeat;
        width:94px;
        height:21px;
        cursor:pointer;
        }

        .suggest_link {
                        background-color: #f9f8f0;
                        padding: 2px 6px 2px 6px;
                                        border-bottom: #E9E9E9 solid 1px;
                                        padding:5px 5px 5px 5px;
        }
        .suggest_link_over {
                        background-color: #ffffff;
                        padding: 2px 6px 2px 6px;
                        cursor:pointer;
                                        border-bottom: #E9E9E9 solid 1px;
                                        padding:5px 5px 5px 5px;
        }
        #search_suggest {
                        width:208px;
                        position: absolute;
                        background-color: #FFFFFF;
                        text-align: left;
                        border: #edebd5 solid 1px;
                        visibility:hidden;
                                             
    autor: Igor | 392 | 2009-07-30 16:08:02


    Obcina PL ogonki, dzeiki Adam za rade - trzeba zmieniec funkcje escape na encodeURI
    autor: Berez | 4338 | 2009-11-12 23:51:12


    Nie chce "szukać" mi wyników. Sprawdziłem błędy w firebugu i wyskakuje mi : (załącznik) co z tym zrobić?
    • Zobacz kod dodany do tego wpisu
      • missing } after function body
        [Wstrzymuj na tym błędzie] /* Prototype JavaScript framework, ve...---------------*/Element.addMethods();
        prototype.js (wiersz 1)


        missing ; before statement
        [Wstrzymuj na tym błędzie] function searchSuggest(){;var str = es...yId('search_suggest').innerHTML = '';}
    autor: baggy | 12597 | 2011-10-06 20:57:30


    zmarnowana kasa. Zapłaciłem za coś co nie działa.
    autor: mbierna | 12608 | 2011-10-22 14:49:16


      • Tre¶æ komentarza
        Kod do komentarza (opcjonalnie)
        PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
        Autor
        Token
        token

         

         








    funkcje.net
    Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2025 v.1.5 | design: diviXdesign & rainbowcolors