[php][js] Ciekawy problem z wpisywaniem tekstu Opcje

[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

[PHP] pobierz, plaintext 
<?php
$filter = "sup";
$a=array_filter($array, create_function('$var', 'return strpos($var,"'.$filter.'")===0;'));
?>
[PHP] pobierz, plaintext 

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

Ten post edytował sopel 26.01.2008, 21:37:18

[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

[HTML] pobierz, plaintext 
<script type="text/javascript" src="js/prototype/prototype.js"></script>
  <script type="text/javascript" src="js/scriptaculous/scriptaculous.js"></script>
<style type="text/css">
 <!--
 	div.autocomplete {
      position:absolute;
      width:250px;
      background-color:white;
      border:1px solid #888;
      margin:0px;
      padding:0px;
    }
    div.autocomplete ul {
      list-style-type:none;
      margin:0px;
      padding:0px;
    }
    div.autocomplete ul li.selected { background-color: #ffb;}
    div.autocomplete ul li {
      list-style-type:none;
      display:block;
      margin:0;
      padding:2px;
      height:32px;
      cursor:pointer;
    }
 -->
 </style>
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<input type="text" id="autocomplete" name="autocomplete_parameter"/>
<div id="autocomplete_choices" class="autocomplete"></div>
 
<script type="text/javascript">
//<![CDATA[
	var autocomplete_choices = new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/workspace/scriptaculo/script.php", {});
	}
//]]>
</script>
[HTML] pobierz, plaintext 

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

[PHP] pobierz, plaintext 
<?php
echo '<ul>';
echo "<li>abcd</li>";
echo "<li>ac de</li>";
echo "<li>bbade</li>";
echo "<li>bcde</li>";
echo "<li>gwade</li>";
echo "<li>dgede</li>";
echo "</ul>";
?>
[PHP] pobierz, plaintext 

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ą