PHP,code php,โค้ด php,บทความ php: การทำ autocomplete อย่างง่าย

สามารถนำไปประยุกต์ใช้ใน form ได้เพื่ออำนวยความสะวดกในการกรอกข้อมูล ครับ
HTML Code ตัวอย่าง

Javascript Code

gdata.php Code

<?php
header("Content-type:text/html; charset=UTF-8");       
header("Cache-Control: no-store, no-cache, must-revalidate");      
header("Cache-Control: post-check=0, pre-check=0", false);      
// เชื่อมต่อฐานข้อมูล
$link=mysql_connect("localhost","root","123456") or die("error".mysql_error());
mysql_select_db("database_name",$link);
mysql_query("set character set utf8");

$q = urldecode($_GET["q"]);
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="article"; // ตารางที่ต้องการค้นหา
$find_field="arti_topic"; // ฟิลที่ต้องการค้นหา
$sql = "select * from $table_db  where locate('$q', $find_field) > 0 order by locate('$q', $find_field), $find_field limit $pagesize";
$results = mysql_query($sql);
while ($row = mysql_fetch_array( $results )) {
 $id = $row["arti_id"]; // ฟิลที่ต้องการส่งค่ากลับ
 $name = ucwords( strtolower( $row["arti_topic"] ) ); // ฟิลที่ต้องการแสดงค่า
 // ป้องกันเครื่องหมาย '
 $name = str_replace("'", "'", $name);
 // กำหนดตัวหนาให้กับคำที่มีการพิมพ์
 $display_name = preg_replace("/(" . $q . ")/i", "<b>$1</b>", $name);
 echo "
<li onselect=\"this.setText('$name').setValue('$id');\">$display_name</li>
";
}
mysql_close();
?>

แต่จำเป็นต้องมีไฟล์ประกอบอีกน่าะครับ copy แล้วสร้างไฟล์ save ชื่อตามนี้เลย 1.autocomplete.js

</div>")}var e=$(x);var es=e.style;es.position="absolute";es.left=es.top="-800px";es.overflow="scroll";es.width="40px";e.innerHTML="<div style='width:80px;height:80px' class='autocomplete_icon'>

</div>";sw=e.offsetWidth-e.clientWidth},inst:new Array(),name:"",key:"",updateViews:function(){for(var i=0;i<ac.inst.length;i++){ac.inst[i].image.position()}}});var NSImage=Class.create({initialize:function(o){var id="_image_"+NSImage.count++;document.write("<div id='"+id+"' class='autocomplete_icon' style='padding:0; margin:0; height:12px; width:12px; position:absolute; left:-99px; top:-99px; font-size:0px'>

</div>");this.e=$(id);this.o=o;this.e.onclick=function(){if(this.isReset()){o.setText("");this.ready();o.makeURI();o.stop()}else{if(this.isReady()){o.isON=1;o.isNotClick=0;o.custom_uri="";o.request()}}o.text.focus()}.bind(this,o)},finished:function(){if(this.o.text.value.length){this.reset()}else{this.ready()}},position:function(){var t=this.o.text;var p=viewportOffset(t);var parent=getOffsetParent(this.e);var d=viewportOffset(parent);this.e.style.left=(p[0]-d[0]-fixMSIE(parent)[0]+t.offsetWidth-16)+"px";this.e.style.top=(p[1]-d[1]-fixMSIE(parent)[1]+Math.round((t.offsetHeight-12)/2)+(webkit?1:0))+"px"},ready:function(){this._set("0 0")},go:function(){this._set("0 12px")},reset:function(){this._set("0 24px")},isReady:function(){return !(this.isGo()||this.isReset())},isGo:function(){return this._get().indexOf("12")>-1},isReset:function(){return this._get().indexOf("24")>-1},_get:function(){return this.e.style.backgroundPosition},_set:function(v){this.e.style.backgroundPosition=v}});Object.extend(NSImage,{count:0});var NSList=Class.create({initialize:function(object,withFrame){NSList.count++;var id="_list_"+NSList.count;var x="autocomplete_list";if(loaded){var e=document.createElement("ol");e.id=id;var es=e.style;es.position="absolute";es.left=es.top="-8000px";e.className=x;document.body.appendChild(e)}else{document.write("<ol id='"+id+"' style='position:absolute;left:-8000;top:-8000px' class='"+x+"'></ol>")}this.e=$(id);this.o=object;if(msie6&&withFrame){if(loaded){var e=document.createElement("iframe");e.id="_iframe_"+NSList.count;var es=e.style;es.position="absolute";es.filter="progid:DXImageTransform.Microsoft.Alpha(opacity = 0)";e.src="javascript:false;";document.body.appendChild(e)}else{document.write("<iframe id='_iframe_"+NSList.count+"' style='position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity = 0)' src='javascript:false;'></iframe>")}this.F=$("_iframe_"+NSList.count);this.F.style.display="none"}},isVisible:function(){var s=this.e.style;return(s.display!="none")&&(toInt(s.left)>=0)&&(toInt(s.top)>=0)},setContent:function(t){this.e.innerHTML=t},content:function(t){return this.e.innerHTML},hide:function(){if(this.isVisible()){this.e.style.left="-8000px"}if(this.F){this.F.style.display="none"}},display:function(w,h,sf){var t=this.o.text;var p=viewportOffset(t);var parent=getOffsetParent(this.e);var delta=viewportOffset(parent);var l=p[0],d=t.offsetWidth-w,a=this.o.options.align,ls=this.e.style;if((a=="auto")&&(document.body.offsetWidth-l-w>14)){d=0}if(a=="left"){d=0}if(a=="center"){d/=2}ls.width=w+"px";ls.height=h;if(sf){this.o.D()}var F=this.F;var e=this.e;setTimeout(function(){ls.top=p[1]+t.offsetHeight-delta[1]-fixMSIE(parent)[1]+"px";ls.left=l-delta[0]-fixMSIE(parent)[0]+d+(msie?t.scrollLeft:0)+"px";ls.display="";if(F){self.name=sn;var es=F.style;es.top=ls.top;es.left=ls.left;es.width=ls.width;es.height=e.clientHeight;es.display=""}},100)},autoWidth:function(){var i=500;if(!!window.opera){this.e.style.width=i+PX}var oh=this.e.offsetHeight;if(webkit||ff3||msie8){w=this.e.offsetWidth}else{var step=50;var l=100,h=i,ow;do{i=Math.ceil((l+h)/2);this.e.style.width=i+PX;ow=this.e.offsetWidth;if(gecko||document.compatMode=="CSS1Compat"){ow-=g_bw*2}if((this.e.offsetHeight>oh)||(ow>i)){l=i+step}else{h=i}}while((h-l)/step>0.9);w=h;this.e.style.width=w+"px"}return w},autoHeight:function(){var s=this.o.options.size;var A=$A(this.e.getElementsByTagName("li"));var l=A.length;var m=A[(l>s?s:l)-1];var h=m.offsetTop+m.offsetHeight;if(msie6||msie7){h-=toInt(getStyle(m).paddingTop)}if(msie8){h-=g_bw}h-=g_bw;return h+"px"},parseItems:function(){var items=new Array(),ls=this.e.childNodes;for(var j=0;j<ls.length;j++){var x=ls[j];if(x.nodeType==1&&x.getAttribute("onselect")){var i=items.length;x.onmouseover=function(i){this.focus(i)}.bind(this.o,i);x.onclick=function(i){this.i=i;this.z()}.bind(this.o,i);items.push(x)}}if(items.length>this.o.options.size){this.e.style.overflow="auto"}return items},prepare:function(){this.e.style.width=this.e.style.height="auto";var ls=this.e.childNodes,i=0,lt;for(var j=0;j<ls.length;j++){var x=ls[j];if(ac.I(x)){lt=x;if(msie&&(i++<this.o.options.size)&&!x.getElementsByTagName("span").length){x.innerHTML="<span style='padding:0'></span>"+x.innerHTML}}}if(lt){lt.className="last_item"}return ls.length}});Object.extend(NSList,{count:0});ac.prototype={$c:0,init:0,T:0,i:-1,d:1,custom_uri:"",initialize:function(t,f,options){this.text=$(t)?$(t):document.getElementsByName(t)[0];if((this.text==null)||(f==null)||(typeof f!="function")){return}this.text.setAttribute("autocomplete","off");this.setOptions(options);this.f=f;this.makeURI=function(){this.value=encodeURIComponent(this.text.value);if(this.bR()){return this.f()}}.bind(this);var x=this.text.getAttribute("autocomplete_id");if(x!=null){return}var sid="no_"+ac.inst.length;this.text.setAttribute("autocomplete_id",sid);this.onchange=this.text.onchange;this.text.onchange=function(){};this.L=new NSList(this,1);this.L2=new NSList(this);ac.inst.push(this);if(ac.L){ac.L();ac.L=null}this.image=new NSImage(this);this.fpi();this.r()},fpi:function(){for(var i=1;i<=4*10;i++){setTimeout(this.image.position.bind(this.image),i*50)}},setOptions:function(options){this.options={width:"auto",delay:0.4,delimChars:",",size:10,select_first:1,align:"auto"};Object.extend(this.options,options||{})},r:function(){this._k=this.k.bindAsEventListener(this);this.$r=this.request.bind(this);var t=this.text;t.className+=" autocomplete_text";if(/mac/.test(ua)){t._ac=this;t.onkeypress=function(e){return !this._ac.$s}}var O=Event.observe;if(msie){O(t,"keydown",this._k)}else{O(t,"keypress",this._k)}O(t,"keyup",function(e){if(e.keyCode==27){this.image.finished()}}.bind(this));O(t,"blur",this.blur.bind(this));if(ac.inst.length==1){O(document,"click",ac.C)}O(window,"resize",this.image.position.bind(this.image));var e=t;while(e=e.parentNode){if(e.style&&(e.style.overflow=="scroll"||e.style.overflow=="auto")){this.scrollable=this.scrollable?this.scrollable:e;O(e,"scroll",this.onScroll.bind(this))}}},setText:function(v){this.text.value=v;return this},onScroll:function(){var s=this.scrollable;if(s){var p=this.t();var o=cumulativeOffset(s);if(p[1]>=o[1]&&p[1]<o[1]+s.offsetHeight&&p[0]>=o[0]&&p[0]<o[0]+s.offsetWidth&&this.L.isVisible()){this.s()}else{this.L.hide()}}},t:function(){var p=viewportOffset(this.text);return[p[0]+(msie?this.text.scrollLeft:0)+(document.documentElement.scrollLeft||document.body.scrollLeft),p[1]+(document.documentElement.scrollTop||document.body.scrollTop)]},iolv:function(){var d=this.options.delimChars,v=encodeURIComponent(this.text.value),i,j,k=0;for(i=v.length-1;i>=0;i--){for(j=0;j<d.length;j++){if(v.charAt(i)==d.charAt(j)){k=i+1;break}}if(k){break}}return k},page:function(n){var s=this.options.size,i=this.i,l=this.items.length;if(n=="page_up"){if(i>=s){this.focus(i-s)}else{this.focus(0)}}if(n=="page_down"){if(i+s<l){this.focus(i+s)}else{this.focus(l-1)}}},blur:function(){if(!this.L.isVisible()&&!this.image.isGo()){this.isON=0;setTimeout(function(){if(!this.isON){this.stop()}}.bind(this),4)}},stop:function(){this.c();this.image.finished();this.L.hide()},c:function(){if((this.latest)&&(this.latest.transport.readyState!=4)){this.latest.transport.abort()}},k:function(e){if(!$$&&Math.floor((g-new Date().getTime()/1000)/86400)<0){return}this.isON=1;this.$s=false;var c=e.keyCode;var delay=this.options.delay;this.isModified=1;this.isNotClick=1;if(c==13||c==9){if(c==13){Event.stop(e)}if(this.L.isVisible()){if((this.$c)&&(this.i>-1)){this.$s=true}this.z();return}delay=0.005;this.isModified=0}if(c==27){this.stop();if(webkit){this.text.blur();this.text.focus()}}var pupd=0,ud=0;if(c==33||c==34||c==63276||c==63277){pupd=1;if(this.$c){(c==33)||(c==63276)?this.page("page_up"):this.page("page_down")}}if(c==38||c==40||c==63232||c==63233){ud=1;if(this.$c){(c==38)||(c==63232)?this.U():this.D()}}if((pupd||ud||c==13)&&this.$c){Event.stop(e);return}if(delay>60||c==9||c==27||c==37||c==39||c==35||c==36||c==45||c==16||c==17||c==18||c==91){return}this.custom_uri="";clearTimeout(this.T);this.c();setTimeout(function(){this.T=setTimeout(this.$r,delay*1000)}.bind(this,delay),5)},z:function(){var m=this.G();if(m){this.stop();var isP=0;try{var s=m.getAttribute("onselect").replace("this.request(","this.request(1");isP=s.indexOf("this.request(")>-1;eval(s)}catch(e){}cwa.focus(this.text);if(!isP){this.image.finished()}if(this.onchange){setTimeout(function(){this.onchange.bind(this.text)()}.bind(this),4)}}},G:function(){return this.items?this.items[this.i]:null},focus:function(i,pass){if((this.i==i)||(!this.$c)){return}this.L.e.style.display="";rm_class(this.G(),"current_item");this.i=i;var m=this.G();if(!m){return}m.className+=" current_item";var u=this.L.e,h=this.options.size*m.offsetHeight,mt=m.offsetTop;if(ff2){mt+=g_bw}if(msie8){mt-=g_bw}var moveUp=(mt<=u.scrollTop)||(i==0);var moveDown=mt+m.offsetHeight-u.scrollTop>h;if(moveUp){if(msie6||msie7){mt-=toInt(getStyle(m).paddingTop)}u.scrollTop=mt}if(moveDown){if(msie6||msie7){mt-=toInt(getStyle(m).paddingBottom)}u.scrollTop=mt+m.offsetHeight-h}try{var z=m.getAttribute("onfocus");if(msie){z=cwa.b(z.toString())}eval(z)}catch(e){}},U:function(){if(this.i>-1){this.focus(this.i-1)}},D:function(){if(this.i<this.items.length-1){this.focus(this.i+1)}},bR:function(){if(!this.init){this.init=true;this.L.onscroll=function(){cwa.focus(this.text)}.bind(this)}return true},request:function(u){var z=typeof u!="string";if(u==1){u=this.url;this.isON=1}else{if(z){u=this.makeURI()}}if(this.isON){this.url=u;if(u==undefined){this.stop();return}this.$c=0;this.i=-1;this.image.go();this.latest=new Ajax.Updater({onComplete:this.d.bind(this)});this.latest.request(u+this.custom_uri)}else{this.stop()}},d:function(response){var l=this.latest;var tx=l.transport;if(this.isON&&(tx==response.transport)&&(this.latest.url==this.url+this.custom_uri)){this.L2.setContent(response.responseText);this.$c=1;try{if((typeof tx.status!="unknown")&&l.success()){}else{this.L2.setContent("
<li onselect=';'>An error occured. 
HTTP error code:"+tx.status+"</li>
")}this.$c=1;if(this.L2.prepare()){this.s(this.options.select_first)}else{this.stop()}}catch(e){}}},offset:function(e){var o=0;if(gecko||webkit||(msie&&!backCompat)){var pl="padding-left",pr="padding-right";var f=function(e,p){return toInt(Estyle(e,p))};o=g_bw*2+f(e,pl)+f(e,pr)}return o},s:function(ft){this.isON=1;var w=this.L2.autoWidth(),h="auto";this.i=-1;this.L.setContent(this.L2.content());this.items=this.L.parseItems();if(this.items.length>this.options.size){w=parseInt(w)+sw;h=this.L2.autoHeight()}if(w<this.text.offsetWidth){w=this.text.offsetWidth}if(this.items.length){this.L.display(w,h,ft)}if(msie){setTimeout(function(){for(var j=0;j<this.items.length;j++){var x=this.items[j];if(!x.getElementsByTagName("span").length){x.innerHTML="<span style='padding:0'></span>"+x.innerHTML}}}.bind(this),0)}this.image.finished()}};window.AutoComplete=window.Autocomplete=ac})();

2.autocomplete.css 3.autocomplete.gif

ทักทายครับ

20 เม.ย. 2555

การทำ autocomplete อย่างง่าย

ไม่มีความคิดเห็น: