Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [php][js] Ciekawy problem z wpisywaniem tekstu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
gulgul
Witam,
mam taki specyficzny problem
1) mam tablicę w php (przykładowo)
$tabela=array("umba","tur","akula","supro","supratex","supotu","sup");

2) mam pole TextField

Problem tkwi w tym, że chciałbym by po wpisaniu 3 liter w tym polu poniżej pojawiła się lista(tylko, żeby była nałożona na wszystko - chodzi o to, by wyglądało to tak jak przy wpisywaniu w jakieś pole danych już wcześniej(kiedyś) wpisanych np. login) która posiadałaby elementy rozpoczynające się na te 3 litery. Im więcej liter byłoby podanych, tym większa dokładość i mniej elementów w tej liście. Przy naciśnięciu na wybrany element odpowiedni tekst pojawiłby się w tym polu TextField.

Może to trochę zawiłe dlatego dam przykład:

w polu wpisuję: sup

w tej liście wyświetli się:

sup
supotu
supratex
supro

jak dopisałbym: supo

to na liście byłby tylko element: supotu
sobstel
array_filter" title="Zobacz w manualu PHP" target="_manual

  1. <?php
  2. $filter = "sup";
  3. $a=array_filter($array, create_function('$var', 'return strpos($var,"'.$filter.'")===0;'));
  4. ?>


EDIT:
dopiero teraz zauważyłem, żę chodzi o JS, więc tutaj musisz użyć np. http://developer.mozilla.org/en/docs/Core_...ts:Array:filter
Mati7
Chodzi Ci pewnie o autocompleter, możesz zrobić coś takiego korzystają z biblioteki scriptaculous

Demo:
http://demo.script.aculo.us/ajax/autocompleter

Kod:
http://wiki.script.aculo.us/scriptaculous/...x.Autocompleter
gulgul
kurcze, jakoś nie umiem tego zaczaić

co do scriptaculous to jest to co mnie interesuje, ale mam straszne problemy z implementacją tego.
Byłbym bardzo wdzięczny, gdyby ktoś mi w tym pomógł
Mati7
W nagłówku dokumentu podłączasz biblioteki i dajesz style

  1. <script type="text/javascript" src="js/prototype/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous/scriptaculous.js"></script>
  3. <style type="text/css">
  4. <!--
  5. div.autocomplete {
  6. position:absolute;
  7. width:250px;
  8. background-color:white;
  9. border:1px solid #888;
  10. margin:0px;
  11. padding:0px;
  12. }
  13. div.autocomplete ul {
  14. list-style-type:none;
  15. margin:0px;
  16. padding:0px;
  17. }
  18. div.autocomplete ul li.selected { background-color: #ffb;}
  19. div.autocomplete ul li {
  20. list-style-type:none;
  21. display:block;
  22. margin:0;
  23. padding:2px;
  24. height:32px;
  25. cursor:pointer;
  26. }
  27. -->
  28. </style>


w ciele dokumentu dajesz input i skrypt który inicjalizuje autocompleter

  1. <input type="text" id="autocomplete" name="autocomplete_parameter"/>
  2. <div id="autocomplete_choices" class="autocomplete"></div>
  3.  
  4. <script type="text/javascript">
  5. //<![CDATA[
  6. var autocomplete_choices = new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/workspace/scriptaculo/script.php", {});
  7. }
  8. //]]>


zamiast "/workspace/scriptaculo/script.php" dajesz swoją bezwzględną scieżkę do skryptu php który zwraca dane
w postaci listy nieuporządkowanej

  1. <?php
  2. echo '<ul>';
  3. echo "<li>abcd</li>";
  4. echo "<li>ac de</li>";
  5. echo "<li>bbade</li>";
  6. echo "<li>bcde</li>";
  7. echo "<li>gwade</li>";
  8. echo "<li>dgede</li>";
  9. echo "</ul>";
  10. ?>


Jak zauważysz ile literek byś nie wpisał to i tak pojawia ci się cała lista, więc musisz zmodyfikować skrypt php tak by zwracał ci odpowiednie dane

Za pomoca ajaxa do skryptu php przekazywana jest zmienna $_POST['autocomplete_parameter'] zawierająca literki które wprowadzasz w inpucie. Żądanie post jest wywoływane za każdym razem jak wprowadzasz nową literkę, więc musisz przefiltrować tylko wynik w oparciu o ta zmienną
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.