inputに類似したタグを表示するプラグイン jQuery Tag Suggestion

inputに類似したタグを表示するプラグイン jQuery Tag Suggestion

Tag Suggestion はinput内に入力した際に類似したタグを表示してくれるjQuery のプラグインです。

demo page

…ここからが続き

Tag Suggestion ダウンロード先、使い方

head内

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="js/tag.js"></script>
<script type="text/javascript">
$(function () {
$('#tags').tagSuggest({
    tags: ["agile","ajax","apache","api","apml","applescript","architecture","auth","autocomplete","beautify","bug","bugs","C","canvas","cheatsheet","closure","Cocoa","code","codedump","comet","compiler","compression","compressor","Computer","crossdomain","csrf","css3","D","dashcode","debug","debugger","debugging","development","dom","ext","firebug","firefox","flash","flex","framework","functions","greasemonkey","hack","hacks","howto","html","html5","ie","iframe","iframes","innerhtml","input","Java","javascript","jquery","js","js2","keycodes","keypress","LAMP","language","languages","leak","leaks","livesearch","memory","memoryleak","minify","moo","mootools","namespace","nu","oauth","obfuscate","obfuscator","objective-c","onload","oop","opml","optimisation","optimised","optimization","pack","packer","performance","perl","php","plugin","plugins","programming","prototype","prototyping","rail","rails","regexp","replacehtml","reserved","rest","ruby","scripting","scroll","scrolling","sdk","snippet"]
	});
});
</script>

XHTML

<input class="input" type="text" name="tags" value="" id="tags" />

CSS

span.tagMatches span {
	padding: 2px;
	margin-right: 5px;
	background: #212121;
	color: #FFF;
	cursor: pointer;
}

head内で記述した$('#tags')のID名とinputに記述ID名を同じにします。

head内で"agile","ajax","apache".........となっている部分が input に入力した際に表示される項目なので、 "サンプル" こんな感じで "" で挟んでタグを記入していって下さい。

demo page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article