用javascript模仿ie的自動(dòng)完成類似自動(dòng)完成功的表單
更新時(shí)間:2012年12月12日 10:52:29 作者:
最近在寫一個(gè)javascript框架,看見網(wǎng)上有不少自動(dòng)完成功能的表單,于是用javascript寫了一個(gè),需要的朋友可以參考下
最近在寫一個(gè)javascript框架,看見網(wǎng)上有不少自動(dòng)完成功能的表單,所以一時(shí)興起,用javascript寫了一個(gè),為自己的框架增點(diǎn)色.
步驟:
1.傳入兩個(gè)參數(shù),第一個(gè)是你要綁定的表單對象,第二個(gè)是你要檢索的數(shù)組.
2.動(dòng)態(tài)建立一個(gè)div做為你要自動(dòng)完成的層,設(shè)置屬性和事件(我在這里并沒有設(shè)置div的visible和display屬性,而是將它的left設(shè)為"-1000px",這樣就移出了瀏覽器之外,達(dá)到了隱藏的效果.
3.對傳入的數(shù)組進(jìn)行檢索,找出與輸入內(nèi)容匹配或相近的項(xiàng),并將其存入一個(gè)新的數(shù)組.這里用正則表達(dá)式進(jìn)行了四次迭代,寫的不好,還望見諒.
4.對存入檢索后數(shù)據(jù)的那個(gè)新數(shù)組進(jìn)行處理,去掉內(nèi)容重復(fù)的項(xiàng),并將其寫進(jìn)div內(nèi).
5.設(shè)置div的left,top,width即可.
下面看給出的完整代碼:
if(!sx)
var sx={};
sx.activex={};
sx.activex.autocomplete={
bind:function(a,s){
var d=document.createElement("div");
d.style.position="absolute";
d.flag="autocomplete";
document.body.appendChild(d);
d.style.left="-1000px";
d.style.height="100px";
d.style.overflow="auto";
a.onblur=function(){
if(document.elementFromPoint(window.event.clientX,window.event.clientY).flag=="autocomplete" || document.elementFromPoint(window.event.clientX,window.event.clientY).parentNode.flag=="autocomplete")
return;
d.innerHTML="";
d.style.left="-1000px";
}
a.onkeyup=function(){
if(a.value=="") {
d.innerHTML="";
return;
}
d.innerHTML="";
var t=[];
for(var i in s){
if(eval("/^"+a.value+"$/i").test(s[i])){
t.push(s[i]);
}
}
for(var i in s){
if(eval("/^"+a.value+".+$/i").test(s[i])){
t.push(s[i]);
}
}
for(var i in s){
if(eval("/^.+"+a.value+"$/i").test(s[i])){
t.push(s[i]);
}
}
for(var i in s){
if(eval("/^.+"+a.value+".+$/i").test(s[i])){
t.push(s[i]);
}
}
for(var e=0;e<=t.length-2;e++){
for(var e1=e+1;e1<=t.length-1;e1++){
if(t[e]==t[e1]){
for(var e2=e1+1;e2<t.length;e2++){
if(t[e2]){
t[e2-1]=t[e2];
}
}
t.length=t.length-1;
}
}
}
//alert(t);
for(var i in t){
var p=document.createElement("div");
p.innerText=t[i];
p.onmouseenter=function(){
this.style.backgroundColor="blue";
}
p.onmouseleave=function(){
this.style.backgroundColor="white";
}
p.onclick=function(){
a.value=this.innerText;
d.style.left="-1000px";
}
d.appendChild(p)
}
d.style.top=a.offsetTop+a.offsetHeight+"px";
d.style.left=a.offsetLeft+"px";
d.style.width=a.offsetWidth+"px";
}
}
}.
調(diào)用的html代碼:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script src="kongjian.js"></script>
<input type="text" size="15" id="a">
<input type="text" size="15" id="a1">
<script>
sx.activex.autocomplete.bind(document.getElementById("a"),["asd","a","sad","er","ewrew","aadasd","wqqwrqw","asasf","qweqw"]);
sx.activex.autocomplete.bind(document.getElementById("a1"),["asd","a","sad","er","ewrew","aadasd","wqqwrqw","asasf","qweqw"]);
</script>
</body>
</html>
代碼沒有優(yōu)化,還請多多包涵,這里給出一個(gè)思路,讓各位見笑了.
步驟:
1.傳入兩個(gè)參數(shù),第一個(gè)是你要綁定的表單對象,第二個(gè)是你要檢索的數(shù)組.
2.動(dòng)態(tài)建立一個(gè)div做為你要自動(dòng)完成的層,設(shè)置屬性和事件(我在這里并沒有設(shè)置div的visible和display屬性,而是將它的left設(shè)為"-1000px",這樣就移出了瀏覽器之外,達(dá)到了隱藏的效果.
3.對傳入的數(shù)組進(jìn)行檢索,找出與輸入內(nèi)容匹配或相近的項(xiàng),并將其存入一個(gè)新的數(shù)組.這里用正則表達(dá)式進(jìn)行了四次迭代,寫的不好,還望見諒.
4.對存入檢索后數(shù)據(jù)的那個(gè)新數(shù)組進(jìn)行處理,去掉內(nèi)容重復(fù)的項(xiàng),并將其寫進(jìn)div內(nèi).
5.設(shè)置div的left,top,width即可.
下面看給出的完整代碼:
復(fù)制代碼 代碼如下:
if(!sx)
var sx={};
sx.activex={};
sx.activex.autocomplete={
bind:function(a,s){
var d=document.createElement("div");
d.style.position="absolute";
d.flag="autocomplete";
document.body.appendChild(d);
d.style.left="-1000px";
d.style.height="100px";
d.style.overflow="auto";
a.onblur=function(){
if(document.elementFromPoint(window.event.clientX,window.event.clientY).flag=="autocomplete" || document.elementFromPoint(window.event.clientX,window.event.clientY).parentNode.flag=="autocomplete")
return;
d.innerHTML="";
d.style.left="-1000px";
}
a.onkeyup=function(){
if(a.value=="") {
d.innerHTML="";
return;
}
d.innerHTML="";
var t=[];
for(var i in s){
if(eval("/^"+a.value+"$/i").test(s[i])){
t.push(s[i]);
}
}
for(var i in s){
if(eval("/^"+a.value+".+$/i").test(s[i])){
t.push(s[i]);
}
}
for(var i in s){
if(eval("/^.+"+a.value+"$/i").test(s[i])){
t.push(s[i]);
}
}
for(var i in s){
if(eval("/^.+"+a.value+".+$/i").test(s[i])){
t.push(s[i]);
}
}
for(var e=0;e<=t.length-2;e++){
for(var e1=e+1;e1<=t.length-1;e1++){
if(t[e]==t[e1]){
for(var e2=e1+1;e2<t.length;e2++){
if(t[e2]){
t[e2-1]=t[e2];
}
}
t.length=t.length-1;
}
}
}
//alert(t);
for(var i in t){
var p=document.createElement("div");
p.innerText=t[i];
p.onmouseenter=function(){
this.style.backgroundColor="blue";
}
p.onmouseleave=function(){
this.style.backgroundColor="white";
}
p.onclick=function(){
a.value=this.innerText;
d.style.left="-1000px";
}
d.appendChild(p)
}
d.style.top=a.offsetTop+a.offsetHeight+"px";
d.style.left=a.offsetLeft+"px";
d.style.width=a.offsetWidth+"px";
}
}
}.
調(diào)用的html代碼:
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script src="kongjian.js"></script>
<input type="text" size="15" id="a">
<input type="text" size="15" id="a1">
<script>
sx.activex.autocomplete.bind(document.getElementById("a"),["asd","a","sad","er","ewrew","aadasd","wqqwrqw","asasf","qweqw"]);
sx.activex.autocomplete.bind(document.getElementById("a1"),["asd","a","sad","er","ewrew","aadasd","wqqwrqw","asasf","qweqw"]);
</script>
</body>
</html>
代碼沒有優(yōu)化,還請多多包涵,這里給出一個(gè)思路,讓各位見笑了.
您可能感興趣的文章:
- javascript 自動(dòng)填寫表單的實(shí)現(xiàn)方法
- JSP實(shí)現(xiàn)用于自動(dòng)生成表單標(biāo)簽html代碼的自定義表單標(biāo)簽
- javascript實(shí)現(xiàn)頁面刷新時(shí)自動(dòng)清空表單并選中的方法
- Ajax中通過JS代碼自動(dòng)獲取表單元素值的示例代碼
- jquery自動(dòng)將form表單封裝成json的具體實(shí)現(xiàn)
- 表單提交時(shí)自動(dòng)復(fù)制內(nèi)容到剪貼板的js代碼
- javascript實(shí)現(xiàn)自動(dòng)填寫表單實(shí)例簡析
相關(guān)文章
js監(jiān)聽輸入框值的即時(shí)變化onpropertychange、oninput
很多情況下我們都會(huì)即時(shí)監(jiān)聽輸入框值的變化,以便作出即時(shí)動(dòng)作去引導(dǎo)瀏覽者增強(qiáng)網(wǎng)站的用戶體驗(yàn)感。2011-07-07javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡單實(shí)例
下面小編就為大家?guī)硪黄猨avascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06javascript 顯示全局變量與隱式全局變量的區(qū)別
這篇文章主要介紹了javascript 顯示全局變量與隱式全局變量的區(qū)別,需要的朋友可以參考下2017-02-02ECMAScript6函數(shù)默認(rèn)參數(shù)
這篇文章主要介紹了ECMAScript6函數(shù)默認(rèn)參數(shù)的相關(guān)資料,需要的朋友可以參考下2015-06-06使用JSON格式提交數(shù)據(jù)到服務(wù)端的實(shí)例代碼
這篇文章主要介紹了使用JSON格式提交數(shù)據(jù)到服務(wù)端的實(shí)例代碼,代碼簡單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2018-04-04chorme 瀏覽器記住密碼后input黃色背景處理方法(兩種)
使用chrome瀏覽器選擇記住密碼的賬號,輸入框會(huì)自動(dòng)加上黃色的背景,有些設(shè)計(jì)輸入框是透明背景的,需要去除掉這個(gè)黃色的背景。下面給大家分享chorme 瀏覽器記住密碼后input黃色背景處理方法,一起看看吧2017-11-11