8.7w+
社区成员
// JavaScript Document
/* 查询人员对象 */
function FindStaffFramed(hidId,txtName){
this.length = 0; //保存数组长度
this.add = add; //添加对象
this.crhtml = newCreatHTML(this,hidId,txtName);
}
/* 添加对象 */
function add(id,name){
this[this.length++] = new staffItem(id,name);
}
/* 对象实体 */
function staffItem(id,name){
this.id = id;
this.name = name;
}
/* newCreatHTML对象 */
function newCreatHTML(list,hidId,txtName){
return function(){
this.crhtml = new CreatHTML(list,hidId,txtName);
this.crhtml.creat();
}
}
/* 创建HTML对象 */
function CreatHTML(list,hidId,txtName){
this.hidId = hidId; //存储对象Id的对象Id
this.txtName = txtName; //存储对象Name的对象Id
this.creat = creat;
this.list = list;
this.selectIndex = -1; //当前选中的对象索引值,-1是未选中
this.findIndex = -1; //搜索项开始索引值
this.framed; //HTML总DIV对象
this.txtUserName; //HTML_输入UserName文本框对象
this.ulNames; //HTML_展示所有对象Name的UL对象
this.show = function(){ this.framed.style.display = "block"; }
}
/* 创建HTML元素 */
function creat(){
var txtName = document.getElementById(this.txtName);
this.framed = document.createElement("div");
this.framed.style.left = getAbsoluteLeft(txtName) + 1;
this.framed.style.top = getAbsoluteTop(txtName) + txtName.offsetHeight;
this.framed.id = "framed";
var searchbar = document.createElement("div");
this.txtUserName = document.createElement("input");
this.txtUserName.id = "userName";
this.txtUserName.type = "text";
this.txtUserName.onchange = clearValue(this);
this.txtUserName.style.width = txtName.offsetWidth - 30;
searchbar.appendChild(this.txtUserName);
var btnFind = document.createElement("input");
btnFind.id = "btnFind";
btnFind.type = "button";
btnFind.value = "Fi";
btnFind.onclick = toFindItem(this);
searchbar.appendChild(btnFind);
this.framed.appendChild(searchbar);
this.ulNames = document.createElement("ul");
this.ulNames.id = "ulMain";
this.ulNames.style.width = txtName.offsetWidth - 2;
for(var i = 0; i < this.list.length; i++){
this.creat[i] = document.createElement("li");
this.creat[i].id = "liUser" + i;
this.creat[i].onclick = clickItem(this,i); //单击选中对象,实现选中功能
this.creat[i].onmouseover = moveItem(this.creat[i]);
this.creat[i].onmouseout = moveItem(this.creat[i]);
this.creat[i].innerHTML = this.list[i].name;
this.ulNames.appendChild(this.creat[i]);
}
this.framed.appendChild(this.ulNames);
document.body.appendChild(this.framed);
}
/* 单击选项时选择对象 */
function clickItem(obj,i){
return function(){
if(obj.selectIndex != -1){
obj.creat[obj.selectIndex].className = "";
obj.selectIndex = -1;
}
obj.selectIndex = i;
obj.creat[i].className = "selLi";
document.getElementById(obj.hidId).value = obj.list[obj.selectIndex].id;
document.getElementById(obj.txtName).value = obj.list[obj.selectIndex].name;
obj.framed.style.display = "none";
};
}
/* 悬停在Li上时改变样式 */
function moveItem(objLi){
return function(){
if(objLi.className == "") objLi.className = "mouseLi"
else if(objLi.className == "mouseLi") objLi.className = "";
}
}
/* 跳转到搜索方法 */
function toFindItem(obj){
return function(){ findItem(obj); }
}
/* 处理搜索 */
function findItem(obj){
if(obj.txtUserName.value == "" || obj.txtUserName.value.length == 0) return;
if(obj.selectIndex != -1){
obj.creat[obj.selectIndex].className = "";
obj.selectIndex = -1;
}
for(var i = (obj.findIndex == -1 ? 0 : obj.findIndex + 1); i < obj.list.length; i++){
if(obj.list[i].name.substring(0,obj.txtUserName.value.length) == obj.txtUserName.value){
obj.creat[i].className = "selLi";
obj.selectIndex = i;
obj.findIndex = i;
var scroStart = parseInt(obj.ulNames.scrollTop); //滚动条最小开始位置
var scroStop = scroStart + parseInt(obj.ulNames.offsetHeight); //滚动条最大结束位置
var scroNow = (obj.selectIndex + 1) * parseInt(obj.creat[obj.selectIndex].offsetHeight); //滚动条当前位置
if(scroNow < scroStart)
obj.ulNames.scrollTop = obj.selectIndex * parseInt(obj.creat[obj.selectIndex].offsetHeight);
else if(scroNow > scroStop){
obj.ulNames.scrollTop += scroNow - scroStop;
}
return;
}
}
if(obj.selectIndex == -1 && obj.findIndex != -1){
obj.findIndex = -1
findItem(obj);
}
if(obj.selectIndex == -1 && obj.findIndex == -1){
alert("该用户名不存在!");
obj.txtUserName.select();
}
}
/* 搜索框值改变时初始化搜索开始索引值 */
function clearValue(obj){
return function(){ obj.findIndex = -1; }
}
/* 获取HTML对象left绝对值 */
function getAbsoluteLeft( ob ){
if(!ob){return null;}
var mendingOb = ob;
var mendingLeft = mendingOb .offsetLeft;
while( mendingOb != null && mendingOb .offsetParent != null && mendingOb .offsetParent.tagName != "BODY" ){
mendingLeft += mendingOb .offsetParent.offsetLeft;
mendingOb = mendingOb .offsetParent;
}
return mendingLeft ;
}
/* 获取HTML对象top绝对值 */
function getAbsoluteTop( ob ){
if(!ob){return null;}
var mendingOb = ob;
var mendingTop = mendingOb .offsetTop;
while( mendingOb != null && mendingOb .offsetParent != null && mendingOb .offsetParent.tagName != "BODY" ){
mendingTop += mendingOb .offsetParent.offsetTop;
mendingOb = mendingOb .offsetParent;
}
return mendingTop ;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" src="fsf_4.js"></script>
<style type="text/css">
#framed{
position:absolute; z-index:1; border:#3a8ed4 1px solid; background-color:#FFFFFF; font-size:12px;
}
#ulMain{
height:100px; overflow-x: hidden; overflow-y: auto; margin:0px; border-top:#3a8ed4 1px solid; text-indent:10px; list-style-type:none; cursor:hand;
}
#ulMain li{
text-decoration:none; height:20px; line-height:20px; display:block; width:100%; overflow:hidden;
}
.mouseLi{
text-decoration:none; background-color:#FFCB97; cursor:hand;
}
.selLi{
background-color:#003399; color:#FFFFFF;
}
#userName{
height:16px; width:170px;
}
#btnFind{
width:20px; height:20px; margin-left:2px; background:url(images/main_icon3.gif) no-repeat; border:0px #999999 solid; cursor:hand; border:#999999 1px solid;
}
</style>
</head>
<body style="margin:0px;">
<input id="user_id" type="hidden" />
选择姓名1:<input id="user_name" type="text" readonly="true" onclick="showfsf()" style="cursor:hand;" />
<input id="user_id2" type="hidden" />
选择姓名2:<input id="user_name2" type="text" readonly="true" onclick="showfsf2()" style="cursor:hand;" />
<input id="user_id3" type="hidden" />
选择姓名3:<input id="user_name3" type="text" readonly="true" onclick="showfsf3()" style="cursor:hand;" />
</body>
<script>
var fsf = null;
function showfsf(){
if(null == fsf){
fsf = new FindStaffFramed("user_id","user_name");
fsf.add("0","张三");
fsf.add("1","李四");
fsf.add("2","王五");
fsf.add("3","赵六");
fsf.add("4","陈七");
fsf.crhtml();
}else{
fsf.crhtml.show();
}
}
var fsf2 = null;
function showfsf2(){
if(null == fsf2){
fsf2 = new FindStaffFramed("user_id2","user_name2");
fsf2.add("0","2张三2");
fsf2.add("1","2李四2");
fsf2.add("2","2王五2");
fsf2.add("3","2赵六2");
fsf2.add("4","2陈七2");
fsf2.crhtml();
}else{
fsf2.crhtml.show();
}
}
var fsf3 = null;
function showfsf3(){
if(null == fsf3){
fsf3 = new FindStaffFramed("user_id3","user_name3");
fsf3.add("0","3张三3");
fsf3.add("1","3李四3");
fsf3.add("2","3王五3");
fsf3.add("3","3赵六3");
fsf3.add("4","3陈七3");
fsf3.crhtml();
}else{
fsf3.crhtml.show();
}
}
</script>
</html>
for(var i = 0; i < this.list.length; i++){
this.creat[i] = document.createElement("li");
this.creat[i].id = "liUser" + i;
this.creat[i].onclick = clickItem(this,i); //单击选中对象,实现选中功能
this.creat[i].onmouseover = moveItem(this.creat[i]);
this.creat[i].onmouseout = moveItem(this.creat[i]);
this.creat[i].innerHTML = this.list[i].name;
this.ulNames.appendChild(this.creat[i]);
}
this.creat = [];
for (var i = 0; i < this.list.length; i++) {
var li = document.createElement("li");
li.id = "liUser" + i;
li.onclick = clickItem(this, i); //单击选中对象,实现选中功能
li.onmouseover = moveItem(li);
li.onmouseout = moveItem(li);
li.innerHTML = this.list[i].name;
this.creat.push(li);
this.ulNames.appendChild(this.creat[i]);
}
function FindStaffFramed(hidId,txtName){
this.length = 0; //保存数组长度
this.options = [];
var me = this;
this.add = function (id, name) { add.call(me.options, id, name); }
this.crhtml = newCreatHTML(this.options,hidId,txtName);
}