Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX] Autopodpowiadanie
Forum PHP.pl > Forum > XML, AJAX
tomall
Witam,

Wykorzystałem na swojej stronie skrypt autouzupełniania zamieszczony w książce "AJAX i PHP Tworzenie interaktywnych aplikacji internetowych.". Skrypt działa prawidłowo, lecz chciałem go trochę przerobić, aby dostosować go do moich potrzeb. Skrypt działa na takiej zasadzie, że w momencie pojawienia się podpowiedzi stają się one linkami i kliknięcie w podpowiedź powoduje przejście do innej strony. Jest to dobre rozwiązanie w przypadku wyszukiwarek np. google suggest, natomiast w moim przypadku skrypt ma służyć do uzupełnienia pola formularza. Będzie on wykorzystany w formularzu do wysyłania prywatnych wiadomości i jego celem ma być podpowiadanie nazw użytkowników. Zatem chciałbym aby wybranie podpowiedzi nie przenosiło do innej strony, a powodowało wpisanie nazwy w pole input. Próbowałem ten problem rozwiązać samemu kombinując z JS, ale chyba jeszcze zbyt słabo znam JS. Skrypt jest dość długi dlatego umieszczam go w osobnym pliku.

http://wrzut.net/qe3h2159sh5s/suggest.txt.html
erix
Kod
// zaczyna tworzyć rząd tabeli HTML, który zawiera odnośnik do oficjalnej strony z pomocą dotyczącą szukanej funkcji
      div += "<tr id='tr" + i + "' onclick='location.href=document.getElementById(\"a" +
        i + "\").href;' onmouseover='handleOnMouseOver(this);' " +
        "onmouseout='handleOnMouseOut(this);'>" + "<td align='left'><a id='a" + i +
        "' href='" + phpHelpUrl + crtFunctionLink + ".php";

Tu masz coś ważnego. Zadanie domowe: sprawdzić, w jaki sposób dochodzi do przekierowania oraz w jaki sposób zmieniać zawartość pola formularza.

PS. Na przyszłość - wrzucaj kod na jakieś normalne nopaste, a nie hostingi.
tomall
Kod
// zaczyna tworzyć rząd tabeli HTML, który zawiera odnośnik do oficjalnej strony z pomocą dotyczącą szukanej funkcji
            div += "<tr id='tr" + i + "' onclick='location.href=document.getElementById(\"a" +
              i + "\").href;' onmouseover='handleOnMouseOver(this);' " +
              "onmouseout='handleOnMouseOut(this);'>" + "<td align='left'><a id='a" + i +
              "' href='" + phpHelpUrl + crtFunctionLink + ".php";

Jeśli chodzi o ten fragment kodu to akurat wiem, że jest odpowiedzialny za wyświetlenie zawartości (tworzenie linków i całej tablicy z podpowiedziami), ale problem polega na tym że jeśli chociażby wytnę ten fragment z linkiem
Kod
<a id='a" + i + "' href='" + phpHelpUrl + crtFunctionLink + ".php";
, oraz jego pozostałe części zamykające, to skrypt przestaje działać. Wydaje mi się że tutaj są jakieś powiązania pomiędzy poszczególnymi funkcjami, np. przesyłanie informacji metodami getElementById. W tym przypadku mogłoby to być id linku.
erix
Nie. Twoją metodę musisz podstawić pod onclick.
tomall
Próbowałem tak:
Kod
onclick='document.getElementById(keyword).value=' " + crtFunction + " '

oraz tak:
Kod
onclick='document.keyword.value=' " + crtFunction + " '


niestety bez efektów.
Pole input przyjmuje wartość pierwszej podpowiedzi z góry pomimo faktu że wybieram inną.
Pozatym nadal tworzy się ten link do strony.

Myślę że chyba będę musiał poszukać innego skryptu.
erix
Pierwsze powinno zadziałać, jeśli tylko podasz cudzysłowy jako parametr.
tomall
Znalazłem przyczynę problemu. Tekst uzupełnia się w momencie kiedy wybiorę podpowiedź z listy za pomocą strzałek klawiatury. Na mysz nie reaguje i nie wstawia tekstu do inputu. W książce wyczytałem że właśnie na mysz ten skrypt nie działa. A kod odpowiedzialny za wybór opcji z klawiatury to:
Kod
/* funkcja, która wybiera obszar w obiekcie tekstowym, przekazywanym jako jej parametr */
function selectRange(oText, start, length)
{  
   // sprawdz rodzaj przeglądarki - IE czy FF
   if (oText.createTextRange)
   {
     //IE
     var oRange = oText.createTextRange();
     oRange.moveStart("character", start);
     oRange.moveEnd("character", length - oText.value.length);
     oRange.select();
   }
   else
     // FF
     if (oText.setSelectionRange)
     {
       oText.setSelectionRange(start, length);
     }
   oText.focus();
}


zatem bez dodatkowych funkcji ani rusz. : /
erix
Po co Ci zwracałem uwagę na onclick? tongue.gif
tomall
Samo onclick działa, wstawia tekst w pole input. Problem polega na tym, że obojetnie którą pozycję wybiorę to wstawia pierwszy z listy autopodpowiedzi. I tutaj nie da się tego ustawić w samym onclick. Do tego potrzebna jest funkcja onmouseover powiązana z odczytem pozycji listy, aby móc z tablicy pobrać odpowiedni wyraz. Służą do tego w tym skrypcie flagi ' i ' oraz ' a '. Tak mi się wydaje.

Zastanawiam się czy zamiast przerabiać ten skrypt, nie wykorzystać do tego celu jquery. Nie bawiłem się nim, a słyszałem że to nawet dobre jest.
nospor
plugin do jquery
http://bassistance.de/jquery-plugins/jquer...n-autocomplete/
bardzo fajny, uzywam od dluzszego czasu
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.