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
查看全文
相关阅读:
mysql 业务SQL语句使用记录
expect脚本使用
ActiveMQ消息队列集群搭建
使用Helm部署dashboard(更换默认helm仓库)
2008 R2中的无线连接 wireless
多线程下的单例设计模式
如何思索算法(一)
提问的智慧 整理版
如何思索算法(三)动态规划
如何思索算法(二) 谈谈素数
原文地址:https://www.cnblogs.com/sjett/p/968026.html
最新文章
IOS开发招聘信息
利用thunk技术封装窗口类
新博客地址
C++编程对缓冲区的理解
Winodw消息编程总结
类模板的模板友元函数定义(转载)
模式趣解
silverlight内存问题总结(二)—javascript内存泄露
Silverlight内存问题总结(五)—完结篇(忏悔一下)
silverlight内存问题总结(二)—javascript内存泄露
热门文章
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
silverlight内存问题总结(三)—silverlight控件内存泄露
Silverlight内存问题总结(四)—用Listbox 来模拟实现轻量级的TreeView控件,解决内存暴涨上百M的问题
silverlight内存问题总结(一)—开篇
最常用的12种设计模式
一个插件
sqlserver数据库使用
ansible学习笔记二
阿里云RDS数据库数据快速恢复到本地mysql服务器上
ansible学习笔记一
Copyright © 2011-2022 走看看