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

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>

(0)

相关推荐

  • 有关suggest快速删除后仍然出现下拉列表的bug问题

    写suggest的时候,有时我们快速删除输入框的文字后,但是suggest下拉列表还有出现,导致的原因是因为ajax异步请求造成的. 虽然我们把输入框的内容都删除了,甚至做了停止后续请求的相关操作,但是由于ajax是异步的,即使你停止了后续的操作,但是最后一次请求的数据还在回来的路上. 解决办法看代码: var inp = document.getElementById('inp'), timer = 0; inp.oninput = function (e) { var val = e.tar

  • javascript suggest效果 自动完成实现代码分享

    首先,用到的框架当然是我的框架mass Framework,当然你用其他框架也可以,如jQuery,没有什么复杂的东西.只要弄懂原理,一下子就能搞出来.想必,以后你们工作也遇到做搜索框的活儿. 由于本人没有后端,因此取用一个对象作为本地数据库.而我现在要做的,其实远远比suggest高级,类似IDE的语法提示的东西.当前成品已放到github上. 好了,我们动手吧.首先是结构层,装了FF的同学可以在百度首页查看源码,当输入几个字母时,会动态生成了那些HTML.不过怎么也好,其成就是一个DIV放到

  • Google Suggest ;-) 基于js的动态下拉菜单

    基本的原理是在当前窗口创建了一个iframe,然后将相关关键词的提示列表在iframe中,并通过列表点选将选定项放到搜索框中.能这么快的能将所有相关关键词的检索数列出,看来所有的提示词已经提前进行了预搜索和数量记录.试了一下"sex",没有相关检索提示,看来对搜索词进行了严格的色情过滤. 另外:这一动态列表功能也应用在GMail的地址栏自动输入完成中,如图: Google自动完成的源代码如下:// Copyright 2004 and onwards Google Inc. var w

  • 仿google搜索提示 SuggestFramework的使用

    一.首先来看一下什么是suggest framework Suggest Framework 故名思意,就是仿 Google Suggest 的一个小框架,让你的文本框也有提示功能.利用suggest framework你可以在自己的网站上很轻松实现"输入提示"效果,这种效果会很大程度上提高用户体验,提高搜索效率. 一个页面上可以出现多个搜索框,每个搜索框都可以实现单独配置. 此框架无浏览器限制,基本兼容当前的绝大多数浏览器,包括Internet Explorer 5+ (Win/Ma

  • ajax Suggest类似google的搜索提示效果

    实现: <script type="text/javascript" src="/path/to/SuggestFramework.js"></script> <script type="text/javascript">window.onload = initializeSuggestFramework;</script> 有了上面两句后,每个取了名的文本框会多出五个属性: 1.action 必须

  • AJAX实现仿Google Suggest效果

    修复了一些细节代码(支持持续按键事件) *项目名称:AJAX实现类Google Suggest效果*作者:草履虫(也就是蓝色的ecma)*联系:caolvchong@gmail.com*时间:2007-7-7*工具: DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库)*测试平台:Firefox2.0,IE6.0,IE7.0*演示地址:http://finish.3322.org/sugges

  • suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)

    重要的键盘事件: 事件顺序:keydown -> keypress ->keyup 对于输入法开启时: keypress: 这三个事件中最最特别的事件的说,如果巧妙运用可以事半功倍: 1. 首先对于大部分功能键是没有keypress事件的 Caps lock ,shift,alt,ctrl,num lock...庆幸的是enter拥有此事件 2. 对于字母,数字,press返回的keyCode是不可靠的 在IE和webkit 下 返回的是ASCII code firfox下永远返回0 但是 对

  • inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)

    像QQ邮箱提示.百度的搜索框提示.淘宝的商品搜索提示等,现在有不少的网站都有类似效果,以提升用户体验. 使用方法: new InputSuggest({ input HTMLInputElement 必选 data Array ['sina.cn','sina.com','2008.sina.com','vip.sina.com.cn'] 必选 containerCls 容器className itemCls 容器子项className activeCls 高亮子项className width

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

    1.下载jquery-latest.js,JSuggest.js和JSuggest.css JSuggest.js源代码如下 复制代码 代码如下: /*** * Description : JSuggest 下拉提示框*/ function JSuggest(){ // DIV下拉框this.div = null; // DIV下的ulthis.ul = null; // 文本输入框this.input = null; // 当前DIV所选的LI对象this.current_li = null;

  • 用jQuery模拟select下拉框的简单示例代码

    很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • Angularjs实现下拉框联动的示例代码

    第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json... 实现截图 html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model

  • jquery实现省市select下拉框的替换(示例代码)

    省市对应的实现:<还有一些没封装起来> 更具选择的省份来确定市的内容 jsp代码: 复制代码 代码如下: <body>  省份<select name="prin">   <option>--请选择--</option>   <option>福建</option>   <option>北京</option>   <option>山东</option>   

  • JS实现的简单下拉框联动功能示例

    本文实例讲述了JS实现的简单下拉框联动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • Yii把CGridView文本框换成下拉框的方法

    本文实例讲述了Yii把CGridView文本框换成下拉框的方法.分享给大家供大家参考.具体实现方法如下: 使用yii的朋友都知道Yii中的CGridView默认显示提文本框了,那么我们要怎么把它转换成下拉框呢?本文就此分析一下解决方法. 默认情况下CGridView会生成一个文本框,但是这并不友好,用户往往希望知道有什么可选的,特别是数据库里存的是数字id的时候,我们希望将数字转换为可读的文本,这时候只需要修改一下表头的"filter"属性就行了,比如: 复制代码 代码如下: <

  • JavaScript实现将数组数据添加到Select下拉框的方法

    本文实例讲述了JavaScript实现将数组数据添加到Select下拉框的方法.分享给大家供大家参考.具体如下: 这里演示将数组中的数据添加到Select下拉菜单中的效果,当你点击下拉框的时候,就动态加载了数据,更换Select内容的时候,直接替换数组中的内容就可以了.适合前端设计者实现前台的部分本地化脚本操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-array-add-select-data-codes/ 具体代码如下: <!D

  • javascript基于DOM实现省市级联下拉框的方法

    本文实例讲述了javascript基于DOM实现省市级联下拉框的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>省市级联下拉框</title

  • ajax请求后台得到json数据后动态生成树形下拉框的方法

    如下所示: <select id="cc" class="easyui-combotree" style="width:580px;" name="rempId" data-options="required:true"></select> <script> $(function(){ $.ajax({ url:"departmentAction_getAllD

  • JavaScript Ajax Json实现上下级下拉框联动效果实例代码

    最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N 复制代码 代码如下: <div class="forntName">部门</div> <div class="inpBox"> <select  name="department" id="department"  onchange="change();" style="width:

随机推荐