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 相关文章推荐
浅谈window对象的scrollBy()方法
Jul 15 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php绘制一个扇形的方法
2015/01/24 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Python实现简单字典树的方法
2016/04/29 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
python是怎么被发明的
2020/06/15 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
大码女装:Ulla Popken
2019/08/06 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
总经理职责
2013/12/22 职场文书
经典广告词大全
2014/03/14 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
社会调查研究计划书
2014/05/01 职场文书
青年志愿者活动感想
2015/08/07 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫