[AJAX] Autopodpowiadanie Opcje

[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

Ten post edytował tomall 7.06.2009, 14:09:42

[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.

Ten post edytował tomall 7.06.2009, 22:06:50

[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? (IMG:http://forum.php.pl/style_emoticons/default/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