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
查看全文
相关阅读:
数据的输入输出
运算符和表达式
深入理解Magento – 第三章 – 布局,块和模板
压抑中......
css控制图片自适应大小
问来北京的追求是什么
magento目录结构精编版
无所事事的日子。
jQuery实现等比例缩放大图片让大图片自适应页面布局
MVC 小常识
原文地址:https://www.cnblogs.com/sjett/p/968026.html
最新文章
chapter8.1、面向对象
chapter6.4 序列化和反序列化
chapter6.3、shutil模块的使用,csv,ini,及configparser模块
chapter6.2、stringIO 、 bytesIO和路径操作
chapter6.1、文件系统操作和上下文管理
chapter5.4Python之functools
Palindrome Partitioning
Graph Clone(DFS)
Copy Graph(BFS)
破解ipad软件splashtop xdisplay的10分钟限制
热门文章
cocos2dx3.2学习笔记1——环境搭建
第四章学习小结心得
第三章学习小结
第2章线性表的学习小结
python的turtle库的练习
建工程的几个错误
使用占位符和变量
力扣——两数之和
对于条件语句的程序编写问题
控制语句
Copyright © 2011-2022 走看看