Facebook üzerinden bir yazı yada resim paylaşımı yaparken arkadaşlarınızı da bu gönderilere etiketleyebildiğinizi biliyorsunuz zaten. Oliver Albrecht ‘ın geliştiridiği TagEdit uygulaması da aynı Facebook benzeri kişi etiketlemenizi sağlayan bir çalışma. Siz Input alanında yazmaya başlar başlamaz yazdıklarınızla alakalı olajn en yakın veriler listeleniyor ve seçmiş olduğunuz veri inputa etiketli bir şekilde yerleşiyor. Bir kelimeyi etiket yapabilmeniz için illaki karşınıza bir sonuç çıkması gerekmiyor. Virgül ile ayırmış olduğunuz kelimeler otomatik etikete dönüşüyor. Buna benzer bir çalışmayı Youtube sitesinde de video yüklerken görebilirsiniz. Ayrıca WordPress yazı yazma paneli de bu şekilde çalışıyor.
Kullanım
- Head etiketleri arasına eklenmesi gereken bölümler.
Js ve Css doya url adresleri :
<link rel="StyleSheet" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" type="text/css" media="all"/> <link rel="StyleSheet" href="css/jquery.tagedit.css" type="text/css" media="all"/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script> <script type="text/javascript" src="js/jquery.autoGrowInput.js"></script> <script type="text/javascript" src="js/jquery.tagedit.js"></script>
Javascript :
<script type="text/javascript">
$(function() {
// Fullexample
$( "#tagform-full" ).find('input.tag').tagedit({
autocompleteURL: 'server/autocomplete.php'
});
// Edit only
$( "#tagform-editonly" ).find('input.tag').tagedit({
autocompleteURL: 'server/autocomplete.php',
allowEdit: false,
allowAdd: false
});
});
</script>- Body etiketleri arasına eklemeniz gereken bölüm :
Html :
<form action="server/formtarget.php" method="post" id="tagform-full">
<p>
<input type="text" name="tag[19-a]" value="Merlin" class="tag"/>
<input type="text" name="tag[15-d]" value="Little Owl" class="tag"/>
<input type="submit" name="save" value="Save"/>
</p>
</form>Autocomplete.php dosyasına düzenlemeniz gereken kısım :
$autocompletiondata = array(
3 => 'Hazel Grouse',
4 => 'Common Quail',
5 => 'Common Pheasant',
6 => 'Northern Shoveler',
7 => 'Greylag Goose',
8 => 'Barnacle Goose',
9 => 'Lesser Spotted Woodpecker',
10 => 'Eurasian Pygmy-Owl',
11 => 'Dunlin',
13 => 'Black Scoter',
14 => 'Eurasian Wryneck',
15 => 'Little Owl',
16 => 'Eurasian Curlew',
17 => 'Ruff',
18 => 'Little Tern',
19 => 'Merlin',
20 => 'Bluethroat',
21 => 'Redwing',
22 => 'Wood Nuthatch',
23 => 'Firecrest',
24 => 'Goldcrest',
25 => 'Bearded Parrotbill',
26 => 'Chaffinch',
27 => 'Brambling',
28 => 'Hawfinch',
29 => 'Goldcrest',
);