[JS] [JQuery] AJAX ile Otomatik Tamamlama

s5prin · 09.05.2008

Örnek kullanım (Havaalanı otomatik tamamlama)

Her amaçla kullanabilmek amacıyla jquery kütüphanesi destekli OOP yapıda, JSON :: veri tipi kullanan bir şeyler karalamıştım. @BYK arkadaşım kadar paylaşımcı davranmadığım için şimdi utandım;

Kullanımı:
HTML textbox kodundan sonra veya body onload'da:

HTML Code:

<script type="text/jscript">
<!--
var oopNesnesi = new VP_Ajax_Suggest('veritabaniTabloIsmi', 'textboxIDsi', ['gizliInputIDsi'], [goruntulemeLimiti]);
-->
</script>

oopNesnesi
@var jquery object
Textbox'u veya gizli input'u OOP yapıda, jquery metodlarıyla temsil eder. Normalde bu tanımlama dışında bir daha kullanma ihtiyacı yoktur. Ancak lazım olursa oopNesnesi.val('yeniDeger'); veya oopNesnesi.addClass('className'); gibi kullanılabilir. bkz: jquery

veritabaniTabloIsmi
@var string
JSON yanıt istenen sunucu dosyasına (PHP, python vs) veritabanında hangi tablodan sonuç istediğini belirtmek amaçlı ?t=veritabaniTabloIsmi şeklinde get metodu ekler. Bu değeri yorumlamak sunucu tarafının görevidir.

textboxIDsi
@var string
Altına liste açılacak ve listede gözüken değerin atanacağı textbox'un id'si.

gizliInputIDsi (İsteğe bağlı parametre)
@var string
Bazen kullanıcıya yardımcı olsun diye çıkardığımız listedeki değere değilde, onun id'sine ihtiyacımız olur. Veya koduna veya o tablodaki başka değere. İşte bu id'nin atanacağı (genellikle) gizli input nesne id'si. Bu id'yi ise JSON yapısındaki değerin index değerini kullanarak yapıyor. Associative array'in key'i, görüntülenen liste öğesinin (<li id="1625">Öneri Maddesi</li>) 1625 'i.

goruntulemeLimiti (İsteğe bağlı parametre)
@var integer
Yine sunucu taraflı dosyaya ?l=goruntulemeLimiti parametresini ekler. Dönen yanıtı saymaz, kontrol etmez, sorumluluk almaz.

Örnek 1:

HTML Code:

<input type="text" name="nickname" id="nickname" />
<script type="text/jscript">
<!--
var memberOOP = new VP_Ajax_Suggest('nicknameTable', 'nickname');
-->
</script>

"nicknameTable" tablosundan süzdüğün verileri sayısal index ve JSON şeklinde ver. Onları <li>beni seç</li> şeklinde göstereyim. Seçilen değeri textbox'un değerine atayayım demek oluyor.

Örnek 2:

HTML Code:

<input type="text" name="nickname" id="nickname" />
<input type="hidden" name="nicknameID" id="nicknameID" />
<script type="text/jscript">
<!--
var memberOOP = new VP_Ajax_Suggest('nicknameTable', 'nickname', 'nicknameID', 20);
-->
</script>

Örnek 1'deki aynı işi yap, ama JSON associative array olsun zira liste öğesindeki (<li id="1625">beni seç</li>) 1625'i nicknameID'sine değer olarak atayacağım demek oluyor. Bir de sonuçları abartma en fazla 20 tane ver diyor.

Örnek 3:

HTML Code:

<input type="text" name="nickname" id="nickname" />
<script type="text/jscript">
<!--
var memberOOP = new VP_Ajax_Suggest('nicknameTable', 'nickname', null, 20);
-->
</script>

Örnek 1'in aynısını yap, id umrumda değil ama sonuçlar 20'yi geçmesin.

Ek özellikler:

Klavye ile listede gezinti yapmayı destekler (aşağı, yukarı, esc, enter vs..)
internet Explorer'daki <select> overlap problemini CSS desteği ile hissettirmeden çözer. bkz: örnek CSS
Listenin estetiği tamamen CSS yapınıza kalmıştır.
Browser problemi yoktur
Delikanlıdır yamuk yapmaz

Örnek CSS: (Ek dosyasında var)

HTML Code:

@charset "utf-8";
/* CSS Document */
/*
// kirpit at gmail.com
// VP Suggest ajax 
*/
.vp_suggest_loading {
	background: transparent url(/images/ajaxload.gif) no-repeat scroll right center;
}
.vp_suggest {
	display: none;
	overflow: hidden;
	background-color: #FFFFFF;
	border: 1px #333333 solid;
	position: absolute;
	padding-left: 0px;
	font-size: 1em;
	text-align: left;
}
.vp_suggest iframe {
	display: block;
	position: absolute;
	height: 3000px;
	width: 3000px;
	left: -10px;
	top: -10px;
	z-index: -1;
	background-color: #FFFFFF;
}
.vp_suggest ul {
	background-color: #FFFFFF;
	list-style-type: none;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.vp_suggest ul li {
	padding: 2px;
}
.vp_suggest ul li.hover {
	background-color: #6ac5fa;
	cursor: pointer;
}
.vp_suggest a {
	background-color: #FFFFFF;
	padding-left: 20px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 20px;
	display: block;
	background-image: url(/images/listbullet.gif);
	background-repeat: no-repeat;
	background-position: 2px center;
}
.vp_suggest a:hover {
	background-color: #FFFFCC;
}

JavaScript:

HTML Code:

/*
// kirpit at gmail.com
*/

function VP_Ajax_Suggest(dataTable, textObjId, hiddenObjId, dispLimit) {
	var UP=38; var DOWN=40; var LEFT=37; var RIGHT=39; 
	var ENTER=13; var SHIFT=16; var TAB=9; var ALT=18;
	var ESC=27; var lastKey=0;

	// TODO: Browser ajax support may be false
	var AJAX_Compatible = true;
	if(AJAX_Compatible==false) {
		return false;
	}
	// Configuration
	this.ajaxFile		= 'ajax.PHP';
	this.minChars		= 3;
	this.slideSpeed		= 300;
	this.dispLimit		= dispLimit ? dispLimit : 0; // Zero means no limit

	// Settings - suggest not to change
	var that			= this;
	this.dataTable		= dataTable;
	this.textObj		= $('#'+textObjId);
	this.hiddenObj		= $('#'+hiddenObjId) ? $('#'+hiddenObjId) : false;
	this.textObj.attr('autocomplete', 'off');

	// Reflects to key pressing
	this.key_event_handler = function(e) {
		e = e ? e : window.event;

		switch(e.keyCode) {
			case LEFT:
			case RIGHT:
			case UP:
			case DOWN:
			case ENTER:
			case TAB:
			case ESC:
				return false;
		}

		if(this.textObj.val().length >= that.minChars) {
			that.textObj.addClass('vp_suggest_loading');
			that.list.refresh();
		} else {
			that.list.hide();
		}
		
		return true;
	}

	// Suggestion List Functions
	this.list = new function() {
		var list = this;
		this.open = false;

		this.refresh = function() {
			// Get JSON response to HTML List
			/************** ajax PARAMATERS **************/
			$.getJSON(that.ajaxFile, {t: that.dataTable, q: that.textObj.val(), l: that.dispLimit}, function(data) {
				list.data = null;
				$.each(data, function(id, val) {
					list.data = data;
					return false;
				});

				if(list.data) {
					list.create();

					// Reset HTML UL
					if(list.div.ul) {
						list.div.ul.empty();
					} else {
						list.div.append(document.createElement('ul'));
						list.div.ul = list.div.find('ul');
					}
					
					$.each(list.data, function(id, val) {
						list.div.ul.append(document.createElement('li'));
						// Create the list item
						list.div.ul.find('li:last').attr('id', id).text(val).hover(
							function() {
								list.select(list.div.ul.lis.index(this));
							}, function() {
								// onmouseout - no need
							}
						).click(function() {
							list.set(list.div.ul.lis.index(this));
						});
					});
					
					list.div.ul.lis = list.div.ul.find('li');
					list.div.slideDown(that.slideSpeed);
					list.open = true;
					list.select(0);
				} else {
					list.hide();
				}

				that.textObj.removeClass('vp_suggest_loading');
			});
		}

		// Create the list div if it wasnt
		this.create = function() {
			if(!list.div) {
				$('body').append(document.createElement('div'));
				list.div = $('div:last');
				list.div.addClass('vp_suggest');

				// Yes, we all hate buggy browsers
				// So, put a styled iframe in it
				if($.browser.msie) {
					iframeEl = document.createElement("iframe");
					iframeEl.src = 'JavaScript:false;';
					list.div.prepend(iframeEl);
				}

				// Set the top and left positions relative to textObj
				listTop = that.textObj.offset().top + that.textObj.height() + parseInt(that.textObj.CSS('border-top-width')) + parseInt(that.textObj.CSS('border-bottom-width')) + parseInt(that.textObj.CSS('padding-top')) + parseInt(that.textObj.CSS('padding-bottom'));
				list.div.CSS('top', listTop);
				list.div.CSS('left', that.textObj.offset().left);
			}
		}
		
		// Hide the list div
		this.hide = function() {
			if(list.div)
				list.div.slideUp(that.slideSpeed);
			list.open = false;
		}
		
		// Set the selection index
		this.select = function(listIndex) {
			$.each(list.div.ul.lis, function() {
				if(list.div.ul.lis.index(this)==listIndex) {
					$(this).addClass('hover');
					list.selection = listIndex;
				} else {
					$(this).removeClass('hover');
				}
			});
		}

		// Move the selection
		this.move = function(diff) {
			var moveTo = list.selection + parseInt(diff);
			if(moveTo < 0) {
				moveTo = 0;
			} else if(moveTo > list.div.ul.lis.length-1) {
				moveTo = list.div.ul.lis.length-1;
			}
			
			list.select(moveTo);
		}

		// Set the current selection
		this.set = function(listIndex) {
			var myLI = list.div.ul.lis.get(listIndex);
			that.textObj.val($(myLI).text());
			if(that.hiddenObj) {
				that.hiddenObj.val($(myLI).attr('id'));
			}
			list.hide();
		}
	}

	// On Key Press
	this.textObj.keyup(function(e) { return that.key_event_handler(e); });
	this.textObj.keydown(function(e) {
		e = e ? e : window.event;

		if(that.list.open) {
			switch(e.keyCode) {
				case LEFT:
					that.list.move(-1);
					return false;
				case RIGHT:
					that.list.move(1);
					return false;
				case UP:
					that.list.move(-1);
					return false;
				case DOWN:
					that.list.move(1);
					return false;
				case ENTER:
					that.list.set(that.list.selection);
					return false;
				case ESC:
					that.list.hide();
					return false;
				case TAB:
					that.list.set(that.list.selection);
					return true;
			}
		}
	});

	this.textObj.keypress(function(e) {
		e = e ? e : window.event;

		switch(e.keyCode) {
			case ENTER:
				return false;
		}
	});

	this.textObj.blur(function() {
		var oop = that;
		setTimeout(function() {oop.list.hide();}, that.slideSpeed);
	});
}

Saygılar.