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中最常用的继承模式 组合继承
Aug 12 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
JS常见算法详解
Feb 28 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
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数据库密码的找回的步骤
2011/01/12 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
javascript里的条件判断
2007/02/27 Javascript
ArrayList类(增强版)
2007/04/04 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python连接mysql并提交mysql事务示例
2014/03/05 Python
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python中%r和%s的详解及区别
2017/03/16 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
快餐店的创业计划书范文
2014/01/29 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
试了下Golang实现try catch的方法
2021/07/01 Golang
SQL中的三种去重方法小结
2021/11/01 SQL Server