zoukankan
html css js c++ java
[原创]搜索智能提示AutoComplate.js
//
-----------Create by sjett 2007-11-19----------------
var
_outTime
=
3000
;
//
setTimeOut(function,outTime);
var
inputObj
=
false
;
//
current input text control
var
setTimeOutId
=
false
;
var
displayDiv
=
false
;
//
display div
function
autoComplate_Init(ObjId)
{
inputObj
=
document.getElementById(ObjId);
_outTime
=
isNaN(parseInt(inputObj.getAttribute(
"
outTime
"
)))
?
_outTime : parseInt(inputObj.getAttribute(
"
outTime
"
));
autoComplate_InitEvent();
//
init input control Event
autoComplate_InitDisplayDiv();
}
function
autoComplate_InitEvent()
{
inputObj.onkeyup
=
autoComplate_ChangeEvent;
//
onchange onpropertychange
inputObj.onblur
=
autoComplate_DisposeEvent;
}
function
autoComplate_InitDisplayDiv()
{
var
divHtml
=
'
<
div id
=
"
autoComplateList
"
></
div
>
';
document.write(divHtml);
displayDiv
=
document.getElementById('autoComplateList');
autoComplate_DisposeEvent();
//
hiddern
displayDiv.style.top
=
(inputObj.offsetTop
+
inputObj.offsetHeight)
+
"
px
"
;
//
top,left
displayDiv.style.left
=
inputObj.offsetLeft
+
"
px
"
;
displayDiv.style.width
=
inputObj.offsetWidth
+
"
px
"
;
//
height,width
}
function
autoComplate_ChangeEvent()
{
if
(inputObj.value
==
'')
{
return
;}
if
(setTimeOutId)
{clearTimeout(setTimeOutId);}
setTimeOutId
=
setTimeout(
function
()
{
//
这里做一些你想在Input控件的事件中处理事务
autoComplate_GetData();
}
, _outTime);
}
function
autoComplate_DisposeEvent()
{
if
(displayDiv)
{
displayDiv.style.visibility
=
'hidden';
displayDiv.style.display
=
'none';
displayDiv.innerHTML
=
'';
//
clear
setTimeOutId
=
false
;
}
}
function
autoComplate_DisplayDivShow()
{
if
(displayDiv)
{
displayDiv.style.visibility
=
'visible';
displayDiv.style.display
=
'block';
setTimeOutId
=
false
;
}
}
function
autoComplate_DisplayDivOnRowOver()
{
eval('
this
.className
=
"
autoComplateList-tr-over
"
');
}
function
autoComplate_DisplayDivOnRowOut()
{
eval('
this
.className
=
"
autoComplateList-tr
"
');
}
function
autoComplate_DisplayDivOnClick()
{
inputObj.value
=
eval('
this
.innerHTML');
autoComplate_DisposeEvent();
//
这里作一些当选中文本后想作的事,比如像google一样提交查询
}
function
autoComplate_DisplayDivSetRowsEvent()
{
for
(
var
index
=
0
; index
<
displayDiv.childNodes.length
-
1
;index
++
)
{
displayDiv.childNodes[index].onmouseover
=
autoComplate_DisplayDivOnRowOver;
displayDiv.childNodes[index].onmouseout
=
autoComplate_DisplayDivOnRowOut;
displayDiv.childNodes[index].onclick
=
autoComplate_DisplayDivOnClick;
}
}
function
autoComplate_GetData()
{
var
ajax
=
new
sack();
ajax.requestFile
=
"
search.aspx?type=4&name=name
"
;
//
请求地址
ajax.onCompletion
=
function
()
{
var
entities
=
ajax.responseXML.getElementsByTagName(
"
entity
"
);
if
(entities.length
<=
0
)
return
;
displayDiv.innerHTML
=
'';
for
(
var
index
=
0
; index
<
entities.length; index
++
)
{
displayDiv.innerHTML
+=
'
<
div class
=
"
autoComplateList-tr
"
>
'
+
entities[index].firstChild.getAttribute(
"
value
"
)
+
'
</
div
>
';
}
//
Close Tag
displayDiv.innerHTML
+=
'
<
div class
=
""
style
=
"
text-align:right;
"
><
a href
=
"
#
"
onclick
=
"
autoComplate_DisposeEvent();
"
>
关闭
</
a
></
div
>
';
//
Add Event
autoComplate_DisplayDivSetRowsEvent();
//
Show
autoComplate_DisplayDivShow();
}
;
ajax.runAJAX();
}
代码示例下载:
https://files.cnblogs.com/sjett/autoComplate.rar
查看全文
相关阅读:
H
G
hdu1430魔板
1104. Don’t Ask Woman about Her Age(数论)
bellman_ford寻找平均权值最小的回路
bellman_ford算法
强联通块tarjan算法
割点算法
字符串的最小表示法
扩展KMP
原文地址:https://www.cnblogs.com/sjett/p/968026.html
最新文章
mongoDB关系型数据库的对比
分布式爬虫(5):微博数据爬取
C#中DateTime的各种操作
C# SHA1散列算法
微信App支付通知验签
支付宝App支付签名和验签
JS产生随机数
log4net的使用
sql拼接一列数据
MySQL安装,启动
热门文章
Unity(四)IocContainer 封装类库
C#获得客户端IP
E
D
B
结构体的比较
逆序对
A
J
I
Copyright © 2011-2022 走看看