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 异步方法队列链实现代码分析
Jun 05 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
Mac下安装vue
2018/04/11 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
Python中的包和模块实例
2014/11/22 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
python Tensor和Array对比分析
2020/01/08 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
得到Class的三个过程是什么
2012/08/10 面试题
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
毕业生就业协议书
2014/04/11 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电