3分钟实现ajax中的autocomplete功能

最新推荐文章于 2021-08-06 09:57:36 发布

dujingjing1230

最新推荐文章于 2021-08-06 09:57:36 发布

阅读量1.5k

点赞数

分类专栏： Javascript AJAX 文章标签： autocomplete ajax function table list styles

本文链接：https://blog.csdn.net/dujingjing1230/article/details/4195650

版权

AJAX 同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

Javascript

30 篇文章 0 订阅

订阅专栏

其实很多的好用的ajax包都有这个功能,平常大家用到的google或者是其它搜索网站的这个功能。我个人觉得这个功能算是ajax提供的最好的功能之一。先看看我给大家的这段javascript实现的效果吧。

它的搜索不仅是以a开头的字段还有那些本身包含a的记录。这个功能当然不是用来给google用的,不过这个功能的基础代码是参考google的搜索功能来写的。这里为了大家能够看到效果我就在html中添加一个数组，而不是直接从server请求数据。所以这个不算是真正的ajax功能,不过我前面写的几个东东都有介绍如何从server请求数据，asp或者是php都有例子。

html页面代码:

很简单的例子，下面就给出大家实现autocomplete功能的javascript代码：

common.js:

/* Event Functions */ // Add an event to the obj given // event_name refers to the event trigger, without the "on", like click or mouseover // func_name refers to the function callback when event is triggered function addEvent(obj,event_name,func_name){ if (obj.attachEvent){ obj.attachEvent("on"+event_name, func_name); }else if(obj.addEventListener){ obj.addEventListener(event_name,func_name,true); }else{ obj["on"+event_name] = func_name; } } // Removes an event from the object function removeEvent(obj,event_name,func_name){ if (obj.detachEvent){ obj.detachEvent("on"+event_name,func_name); }else if(obj.removeEventListener){ obj.removeEventListener(event_name,func_name,true); }else{ obj["on"+event_name] = null; } } // Stop an event from bubbling up the event DOM function stopEvent(evt){ evt || window.event; if (evt.stopPropagation){ evt.stopPropagation(); evt.preventDefault(); }else if(typeof evt.cancelBubble != "undefined"){ evt.cancelBubble = true; evt.returnValue = false; } return false; } // Get the obj that starts the event function getElement(evt){ if (window.event){ return window.event.srcElement; }else{ return evt.currentTarget; } } // Get the obj that triggers off the event function getTargetElement(evt){ if (window.event){ return window.event.srcElement; }else{ return evt.target; } } // For IE only, stops the obj from being selected function stopSelect(obj){ if (typeof obj.onselectstart != 'undefined'){ addEvent(obj,"selectstart",function(){ return false;}); } } /* Caret Functions */ // Get the end position of the caret in the object. Note that the obj needs to be in focus first function getCaretEnd(obj){ if(typeof obj.selectionEnd != "undefined"){ return obj.selectionEnd; }else if(document.selection&&document.selection.createRange){ var M=document.selection.createRange(); try{ var Lp = M.duplicate(); Lp.moveToElementText(obj); }catch(e){ var Lp=obj.createTextRange(); } Lp.setEndPoint("EndToEnd",M); var rb=Lp.text.length; if(rb>obj.value.length){ return -1; } return rb; } } // Get the start position of the caret in the object function getCaretStart(obj){ if(typeof obj.selectionStart != "undefined"){ return obj.selectionStart; }else if(document.selection&&document.selection.createRange){ var M=document.selection.createRange(); try{ var Lp = M.duplicate(); Lp.moveToElementText(obj); }catch(e){ var Lp=obj.createTextRange(); } Lp.setEndPoint("EndToStart",M); var rb=Lp.text.length; if(rb>obj.value.length){ return -1; } return rb; } } // sets the caret position to l in the object function setCaret(obj,l){ obj.focus(); if (obj.setSelectionRange){ obj.setSelectionRange(l,l); }else if(obj.createTextRange){ m = obj.createTextRange(); m.moveStart('character',l); m.collapse(); m.select(); } } // sets the caret selection from s to e in the object function setSelection(obj,s,e){ obj.focus(); if (obj.setSelectionRange){ obj.setSelectionRange(s,e); }else if(obj.createTextRange){ m = obj.createTextRange(); m.moveStart('character',s); m.moveEnd('character',e); m.select(); } } /* Escape function */ String.prototype.addslashes = function(){ return this.replace(/(["///./|/[/]/^/*/+/?/$/(/)])/g, '//$1'); } String.prototype.trim = function () { return this.replace(/^/s*(/S*(/s+/S+)*)/s*$/, "$1"); }; /* --- Escape --- */ /* Offset position from top of the screen */ function curTop(obj){ toreturn = 0; while(obj){ toreturn += obj.offsetTop; obj = obj.offsetParent; } return toreturn; } function curLeft(obj){ toreturn = 0; while(obj){ toreturn += obj.offsetLeft; obj = obj.offsetParent; } return toreturn; } /* ------ End of Offset function ------- */ /* Types Function */ // is a given input a number? function isNumber(a) { return typeof a == 'number' && isFinite(a); } /* Object Functions */ function replaceHTML(obj,text){ while(el = obj.childNodes[0]){ obj.removeChild(el); }; obj.appendChild(document.createTextNode(text)); }

主要实现了所有的事件处理,这个代码好强大，基本上覆盖了现在所有的浏览器的javascript标准。

然后就是实现这个js来实现selection功能也就是自动下拉列表功能的actb.js

你可以通过配置它的style部分的所有属性来设置你得下拉列表的显示:

/* --- Styles --- */
this.actb_bgColor = '#CCCCCC';
this.actb_textColor = '#FFFFFF';
this.actb_hColor = '#000000';
this.actb_fFamily = 'Verdana';
this.actb_fSize = '11px';
this.actb_hStyle = 'text-decoration:underline;font-weight="bold"';
/* --- Styles --- */

重要的一点是让我知道这个东西对你有点启发，也就当是鼓励我了。呵呵。

dujingjing1230

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
3分钟实现ajax中的autocomplete功能

其实很多的好用的ajax包都有这个功能,平常大家用到的google或者是其它搜索网站的这个功能。我个人觉得这个功能算是ajax提供的最好的功能之一。先看看我给大家的这段javascript实现的效果吧。它的搜索不仅是以a开头的字段还有那些本身包含a的记录。这个功能当然不是用来给google用的,不过这个功能的基础代码是参考google的搜索功能来写的。这里为了大家能够看到效果我就在htm
复制链接

扫一扫