搜索框（附带事件函数）
最近做项目的时候，做的搜索框，今天终于做完善了，特贴出来，怕以后自己忘了，写完之后觉得自己写的还行，
搜索框的事件有：
1.获取焦点事件
2.键盘事件：这个事件又分为点击“delete”，“BackSpace”，字符键三种情况
不废话了，直接上代码：
var senceNameSelectedId=null;
var msgList=[];
var tempInputsource=null;
var senceNames=[];
var currentPos=-1;
var senceList=null;
//设置3个开关，“0”：代表开。“1”代表关。
//Switch:"0"代表输入源开，场景关；1代表输入源关，场景开；2代表同时关
var Switch;
function searchBox(){
Switch=0;
var input1=$("#gov_search_key1");//信号源搜索输入框对象
var input2=$("#gov_search_key2");//场景搜索输入框对象
//为搜索输入框绑定事件
//1.获得焦点
input1.bind("focus",getFocus);
input2.bind("focus",getFocus);
//3.keyUp
input1.bind('keyup',sendKeyWord);
input2.bind('keyup',sendKeyWord);
$("#InputH2Id").click(function(){
if(Switch==0){//这种情况下：Switch1=0,Switch1=
Switch=2;
}else if(Switch==1){
Switch=0;
}else if(Switch==2){
Switch=0;
}
});
$("#senceH2Id").click(function(){
if(Switch==0){
Switch=1;
}else if(Switch==1){
Switch=2;
}else if(Switch==2){
Switch=1;
}
});
}
//获得焦点的事件函数
function getFocus(event){
//得到获取焦点对象的id
var id=event.target.attributes.id.nodeValue;
//判断获取焦点的对象时输入源搜索框还是场景搜索框
if(id!=null&&id=="gov_search_key1"){
if(Switch!=0){
$("#InputH2Id").click();
}
//让信号源的tab页面展开显示
//1.获取焦点的是输入源搜索框
var keyWord=$("#gov_search_key1").val();
if(keyWord!=null&&keyWord!=""){
sendKeyWordToBack(keyWord,1);
}
}else if(id!=null&&id=="gov_search_key2"){
//2.获取焦点的是场景搜索框
if(Switch!=1){
$("#senceH2Id").click();
}
var keyWord=$("#gov_search_key2").val();
if(keyWord!=null&&keyWord!=""){
sendKeyWordToBack(keyWord,2);
}
}
}
//keyUp事件函数
function sendKeyWord(event){
//得到触发事件对象的id
var id=event.target.attributes.id.nodeValue;
var type=null;
//输入框中的内容
var keyWord=null;
if(id!=null&&id=="gov_search_key1"){
//1.获取焦点的是输入源搜索框
keyWord=$("#gov_search_key1").val();
type=1;
}else if(id!=null&&id=="gov_search_key2"){
//2.获取焦点的是场景搜索框
keyWord=$("#gov_search_key2").val();
type=2;
}
if(event.keyCode==8){
//点击的“Backspace”键时
if(keyWord==null||keyWord==""){
if(type==1){
if(Switch==1){
$("#InputH2Id").click();
}
iniInputTree("input_list",tempInputsource);
$("#gov_search_key1").focus();
}else if(type==2){
if(Switch==0){
$("#senceH2Id").click();
}
initSenceList();
}
} else{
sendKeyWordToBack(keyWord,type);
}
}else if(event.keyCode == 38||event.keyCode == 40){
//38代表向上箭头，40代表向下箭头
var input=$("#gov_search_key2");
if(type==2){
if(event.keyCode == 38){
if(senceNames.length>0){
//currentPos=currentPos-1;
if(currentPos==0||currentPos==-1){
currentPos=senceNames.length-1;
input.val(senceNames[currentPos]);
}else{
currentPos=currentPos-1;
input.val(senceNames[currentPos]);
}
}
}else if(event.keyCode == 40){
if(senceNames.length>0){
if(currentPos==senceNames.length-1){
currentPos=0;
input.val(senceNames[currentPos]);
}else{
currentPos=currentPos+1;
input.val(senceNames[currentPos]);
}
}
}
}
}else if(event.keyCode == 108 || event.keyCode==13){
//108代表的是主键盘上的enter键，13代表的是数字键盘上的enter键(这个事件只对场景搜索有用)
/*
* hjw
* 调用场景的函数
* */
currentPos=-1;
var vWallId = getVideoWallIdForSenece();//大屏的id
var content=$("#gov_search_key2").val();
if(content==""||content==null){
return false;
}
var flag=false;
for(var i=0;i<msgList.length;i++){
var tempSenceName=msgList[i].split("-")[0];
if(content==tempSenceName){
senceNameSelectedId=msgList[i].split("-")[1];
flag=true;
}
}
//点击enter键，就会弹出对应的场景预览窗
if(flag){
getSenceData(vWallId,senceNameSelectedId);
}else{
return false;
}
}
else{
//点击字符按键时
sendKeyWordToBack(keyWord,type);//向后台查询
}
}
//根据关键字向后台查询，得到若干条数据，或者没有数据(现在模拟若干条数据)
function sendKeyWordToBack(keyWord,type){
keyWord=$.trim(keyWord);
//首先判断需要查询的是输入源还是场景
if(type==1){
//说明需要查询的是输入源
if(keyWord==""||keyWord==null){
//这种情况出现在当连续敲击“Backspace”键删除时
iniInputTree("input_list",tempInputsource);
return;
}else{
//当keyWord不为空的时候
var ids=[];
for(var i=0;i<tempInputsource.length;i++){
//将输入源的信号源名称修改为小写
var nameLower=tempInputsource[i].name.toLowerCase();
//将keyWord也转换为小写
var tempKeyword=keyWord.toLowerCase();
if(nameLower.indexOf(tempKeyword)>-1){
ids.push(tempInputsource[i].id);
}
}
if(ids.length==0){
iniInputTree("input_list",[]);
return;
}
var searchSignals=[];
//用查询的结果重新构造树
//iniInputTree("input_list",tempInputsource);
for(var i=0;i<ids.length;i++){
//var node=zTree.getNodeByParam("id",ids[i],null);
var node=findNodeById(ids[i]);
if(node.pId!=0&&node.pId!=null){
if(!isInTree(node.pId,searchSignals)){
//var parentNode=zTree.getNodeByParam("id",node.pId, null);
var parentNode=findNodeById(node.pId);
searchSignals.push(parentNode);
}
}else if(node.pId==null&&!isInTree(node.id,searchSignals)){
searchSignals.push(node);
}
}
iniInputTree("input_list",searchSignals);
zTree.expandAll(true);
//使信号源搜索框重新获得焦点
$("#gov_search_key1").focus();
}
}else if(type==2){
var aData = [];
if(keyWord==""||keyWord==null){
return;
}
// var senceList=senceTree.getNodes();
if(senceList.length==0){
msgList=[];
return;
}
var senceNodes=[];
for(var i=0;i<senceList.length;i++){
var name=senceList[i].name;
if(name.indexOf(keyWord)>-1){
aData.push(senceList[i].name);
msgList.push(senceList[i].name+"-"+senceList[i].id);
senceNodes.push(senceList[i]);
}
}
senceNames=aData;
initSenceTreeView(senceNodes);
}
}
//判断父节点是否已经在构造的搜索树中了
function isInTree(pId,searchSignals){
for(var i=0;i<searchSignals.length;i++){
var node=searchSignals[i];
if(node.id==pId){
return true;//父节点已经存在于searchSignals了
}
}
return false;
}
//根据id在tempInputsource上查找节点
function findNodeById(id){
for(var i=0;i<tempInputsource.length;i++){
if(tempInputsource[i].id==id){
return tempInputsource[i];
}
}
}
