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 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
javascript取消文本选定的实现代码
Nov 14 Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
vue项目实战总结篇
Feb 11 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
Vue学习之常用指令实例详解
Jan 06 Javascript
vscode中Vue别名路径提示的实现
Jul 31 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
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
Git命令之分支详解
2021/03/02 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
python列表操作使用示例分享
2014/02/21 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
中学生逃课检讨书
2015/02/17 职场文书
功夫熊猫观后感
2015/06/10 职场文书
公司出差管理制度范本
2015/08/05 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL