MTD blog

Ostatnio chciałem zrobić formularz z autouzupełnianiem tekstu w jednym z pól w moim formularzu. Tekst, dane do auto complitera miały być pobierane z bazy za pomoca ajaxa. Jest takie gotowe rozwiązanie w bibliotece script.aculo.us nazywa się Ajaxautocompliter. W projekcie jednak korzystam z JQuery więc i w tym wypadku chciałem z niego skorzystać.

Jquery User Interface (JUI) też posida funkcję pozwalającą stworzyć autocompliter. Niestety nie wiem czemu nie udało mi się uruchomić tego bajeru w połaczeniu z ajaxem. Sam autocompleter działa tak jak trzeba, no ale jak zwykle z braku czasu nie mogłem rozwiązać problemu, więc postanowiłem pozostać przy script.aculo.us.

A oto dosyć prosta implementacja:
Tą część, czyli skrypty i style umieszczamy w sekcji head dokumentu, style możemy też umieścić w zewnętrznym pliku:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

Następnie tworzymy nasz formularz, gdze dodajemy znacznik div, w którym będzie się wyświetlało nasze auto uzupełnianie. Poniżej zaś dodajemy krótki skrypcik, który uruchamia nasz autocompliter.

1
2
3
4
5
6
7
8
9
10
11
12

<form>
    <input type="text" id="autocomplete" name="autocomplete_parameter"/>
    <div id="autocomplete_choices" class="autocomplete"></div>
    <input type="submit" value="Send" />
</form>
 
<script type="text/javascript">
//<![CDATA[
var autocomplete_choices = new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/sciezka/do/skryptu/script.php", {});
}
//]]>
</script>

Ostatnia rzecz, która nam pozostaje to stworzenie skryptu php, który zwraca nam odpowiednie dane.
skrypt powinien wyglądać mniej więcej tak:

1
2
3
4
5
6

<?php
echo '<ul>';
echo "<li>abcd</li>";
echo "<li>ac de</li>";
echo "</ul>";
?>

Działanie tego całego mechanizmu polega na tym, że za każdym razem gdy wpisujemy w pole input jakiś znak, za pomocą żądania ajaxa zostaje wywołany skrypt php, do którego zostaje przekazany parametr w tym przypadku “autocomplete_parameter”(POST), zawierający to co wpiszemy w input (możemy go wykorzystać do filtrowania danych). Wtedy skrypt zwraca nam odpowiednie dane, które wyświetlane są pod polem inputa.

Efekt ten może być bardzo przydatny na niektórych stronach np. w wyszukiwarkach możemy wyświetlać podpowiedzi lub coś w tym stylu.
Jak znajdę chwilkę czasu spróbuje się uporać z uruchomieniem takiego efektu w JQuery.

Powiązane wpisy:

• Ajax w JQuery
• Autocompleter w Jquery
• Cache Smarty
• Dlaczego Zend framework ?
• Zend framework 1.10.0 STABLE wydany

admin Html, Js ajax, autocompleter, autouzupełnianie, jquery, scriptaculous