搜索框（附带事件函数）

最近做项目的时候，做的搜索框，今天终于做完善了，特贴出来，怕以后自己忘了，写完之后觉得自己写的还行，

搜索框的事件有：

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];
}
}
}

时间： 2024-11-06 14:22:07

搜索框（附带事件函数）的相关文章

JavaScript搜索框响应事件

HTML页面,注意:不要使用form标签 <input type = "text" name="keyword" id="keyword" onkeydown="entersearch()"/> <input type = "text" name="keyword" id="keyword" onkeydown="entersearch1(

JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log("aaaaa"); }); JQ: $("input对象").bind("input  propertychange",function(){ console.log("aaaaa"); }): MUI 清除按钮的点击的监听:

bootstrap制作搜索框及添加回车搜索事件

下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件 下面是功能实现的代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>bootstrap制作搜索框及添加回车搜索事件</title> 6 7 <link rel="s

Javascript：仿淘宝搜索框用户输入事件的实现

打开淘宝网首页,找到淘宝首页的搜索框,大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋",还有闪烁的光标.当用户点击输入的时候,灰色字消失.当用户清空文本框的所有内容的时候,灰色字自动恢复. 接下来,这个小案例就是要介绍如何实现这种效果,即用户输入事件. 判断用户输入的事件有 oninput 和onpropertychange .当然,想必你能想到,由于浏览器兼容的问题,他们出现的场合有所不同. 正常浏览器支持oninput ,而 IE6.IE7.IE8 支持的 on

函数stripslashes去除转义 shopnc 搜索框过滤特殊字符 输入单斜杆会自动转义

如何php是如何处理和过滤特殊字符的呢? 搜索%_显示所有商品:搜索\会在搜索框内叠加\\ 查了一下 magic_quotes_sybase 项开启,反斜线将被去除,但是两个反斜线将会被替换成一个. 解决办法 stripslashes — 反引用一个引用字符串 <?php $str = "Is your name O\'reilly?" ; // 输出: Is your name O'reilly? echo stripslashes ( $str ); ?>

EasyUI基础入门之searchbox&amp;progressbar(搜索框和进度条)

easyui基础部分的学习(八大部分)只剩下searchbox和pargressbar.tooltip了,有点小激动呢.本偏文章将对searchbox和pargressbar做一个学习.鉴于两者的内容都不会太多,这里就直接将之合并在一起啦! searchbox 不用过多解释,只要用于用户对数据的搜索.使用$.fn.searchbox.defaults重载默认值. 依赖组件:菜单按钮. searchbox提示用户输入搜索值.它可以设定一个类别菜单,允许用户选择不同的搜索类别.当用户点击确认按钮时将

搜索框关键字智能匹配实例代码实例

搜索框关键字智能匹配实例代码实例:只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="auth

淘宝购物车页面 智能搜索框Ajax异步加载数据

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根

Qt之自定义搜索框——QLineEdit里增加一个Layout，还不影响正常输入文字（好像是一种比较通吃的方法）

简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void addAction(QAction * action, ActionPosition position) 在QLineEdit的前/后添加部件,ActionPosition表示部件所在方位. QAction * addAction(const QIcon & icon, ActionPosition