JSuggest自动匹配下拉框使用方法(示例代码)


Posted in Javascript onDecember 27, 2013

1.下载jquery-latest.js,JSuggest.js和JSuggest.css

JSuggest.js源代码如下

/**
* 
* Description : JSuggest 下拉提示框
*/
function JSuggest(){
// DIV下拉框
this.div = null;
// DIV下的ul
this.ul = null;
// 文本输入框
this.input = null;
// 当前DIV所选的LI对象
this.current_li = null;
/**
* 隐藏下拉提示框
*/
this.hide = function(){
this.div.style.visibility = "hidden";
}
/**
* 显示下拉提示框
*/
this.show = function(){
this.div.style.visibility = "visible";
}
/**
* 下拉提示框状态
*/
this.status = function(){
if (this.div.style.visibility == "visible"){
return true;
}
return false;
}
/**
* 设置当前DIV所选的LI
*/
this.setCurrent_li = function(li, obj){
var co = obj.current_li;
if (co != null){
co.className = ""; 
}
li.className = "li_index";
obj.current_li = li;
}
/**
* 初始化Suggest
* 
* input_id : 输入框的ID
* defHeight: 下拉提示框的高(不提供也可以)
*/
this.init = function(input_id, defHeight){
this.input = document.getElementById(input_id);
//this.input.autocomplete = "off";
var left = this.input.offsetLeft; 
var top = this.input.offsetTop;
var width = this.input.offsetWidth;
var height = this.input.offsetHeight;
var p=this.input.offsetParent;

 while(p!= null){
left+=p.offsetLeft;
top+=p.offsetTop;
p=p.offsetParent;

 }
top+= height;
if(defHeight==null || defHeight==0){
height = 150;
}else{
height = defHeight;
}
this.input.value = "";
var obj = this;
this.input.onkeydown = function(evt){
obj.onkeydown(evt, obj);
}
this.div = document.createElement("div");
this.div.style.width = width + "px";
this.div.style.height = height + "px";
this.div.style.left = left + "px";
this.div.style.top = top + "px";
this.ul = document.createElement("ul");
this.div.appendChild(this.ul);
this.div.className = "jsuggest";
document.body.appendChild(this.div);
}
/**
* 移除DIV下UL中所有的LI
*/
this.remove = function(){
this.current_li = null;
while(this.removeLI());
}
/**
* 移除DIV下UL中的LI
*/
this.removeLI = function(){
var node = this.ul.childNodes;
for(var n in node){
if (node[n] != null && node[n].nodeName == "LI"){
// alert(node[n].innerHTML);
this.ul.removeChild(node[n]);
return true;
}
}
return false;
}
/**
* 在DIV中创建LI
*/
this.create = function(items){
this.remove();
var li_item = items.split(",");
for(var i in li_item){
//alert(li_item[i]);
var li = document.createElement("li");
li.innerHTML = li_item[i];
var obj = this;
li.onmousedown = function(){
obj.onmousedown(this, obj);
}
li.onmouseover = this.onmouseover;
li.onmouseout = this.onmouseout;
this.ul.appendChild(li);
}
this.show();
}
/**
* 文本框按下事件
*/
this.onkeydown = function(evt, obj){
if (!obj.status()){
return false;
}
if (!evt && window.event)
{
evt = window.event;
}
var key = evt.keyCode;
//var KEYUP = 38;
//var KEYDOWN = 40;
//var KEYENTER = 13;
var ob = obj;
if (key == 38){
obj.upKeySelected();
}else if (key == 40){
obj.downKeySelected(); 
}else if (key == 13 || key == 27){
obj.hide(); 
}
}
this.getCurrentLiIndex = function(){
if(this.current_li == null){
return -1;
}
var node = this.ul.childNodes;
for(var n in node){
if (node[n].nodeName == "LI"){
if(node[n] == this.current_li){
return n;
}
}
} 
}
this.getLi = function(index){
var node = this.ul.childNodes;
for(var n in node){
if (node[n].nodeName == "LI" && n == index){
this.setCurrent_li(node[n], this);
return node[n];
}
}
}
this.upKeySelected = function(){
var num = this.getCurrentLiIndex();
if (num != -1 && num > 0){
num--;
var node = this.getLi(num);
this.setCurrent_li(node, this);
this.input.value = node.innerHTML;
}
}
this.downKeySelected = function(obj){
var num = this.getCurrentLiIndex();
if (num == -1){
num = 0; 
}else {
num++;
if (num >= this.ul.childNodes.length)return false;
}
var node = this.getLi(num);
this.setCurrent_li(node, this);
this.input.value = node.innerHTML;
}
/**
* DIV鼠标按下事件
*/
this.onmousedown = function(thiz, obj){
obj.setCurrent_li(thiz, obj);
obj.input.value = thiz.innerHTML;
obj.hide();
}
/**
* DIV鼠标移动事件
*/
this.onmouseover = function(){
if (this.className != "li_index"){
this.className = "li_check";
}
}
/**
* DIV鼠标移出事件
*/
this.onmouseout = function(){
if (this.className == "li_check"){
this.className = "";
}
}
}
var jsuggest = new JSuggest();

2.jsp页面
<input id="text" name="text" type="text"  onkeyup="go(event, this.value);"/>
<script type="text/javascript">    
 j(document).ready(function(){
  // 初始化JSUGGEST
  jsuggest.init("text");
  //或者用下面的方法,设置下拉框高度
  //jsuggest.init("text",200);
 })
 
 function go(event, value){
     event= event ? event : (window.event ? window.event : arguments[0]);
     var url = "url?suggestInput="+encodeURIComponent(value);//url是具体的action或jsp地址等,返回值是以逗号分隔的字符串
  goSuggestInput(event,url,value);
 }
 
function goSuggestInput(evnet,url,value){
        if (value == ""){
         // 如果输入框为空隐藏下拉框
         jsuggest.hide();
      return false;    
        }
     // 确保evt是一个有效的事件   
  if (!evnet && window.event)
  {
   evnet = window.event;
  }
  var key = evnet.keyCode;
  if (key == 38 || key == 40 || key == 13 || key == 27){
   return false;
  }
  j.ajax({
   type: "post",
         url:url,
   dataType: "text",
   cache: "false",
   beforeSend: function(XMLHttpRequest){
   },
   success: function(data, textStatus){
    // 对下拉框添加数据
    jsuggest.create(data);
   },
   complete: function(XMLHttpRequest, textStatus){
   },
   error: function(){
    alert("对不起,服务器忙!");
   }
  });
 }
</script>
Javascript 相关文章推荐
JavaScript 学习点滴记录
Apr 24 Javascript
在线编辑器中换行与内容自动提取
Apr 24 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
vue.js的安装方法
May 12 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 #Javascript
JS 数字转换研究总结
Dec 26 #Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 #Javascript
js几秒以后倒计时跳转示例
Dec 26 #Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 #Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 #Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 #Javascript
You might like
PHP5 面向对象(学习记录)
2009/12/02 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
JS option location 页面跳转实现代码
2008/12/27 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
python 把列表转化为字符串的方法
2018/10/23 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python面向对象 反射原理解析
2019/08/12 Python
django使用xadmin的全局配置详解
2019/11/15 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
就业意向书范文
2014/04/01 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
综合测评个人总结
2015/03/03 职场文书
工程移交协议书
2016/03/24 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python