可输入的下拉列表

最新推荐文章于 2021-03-03 22:35:58 发布
最新推荐文章于 2021-03-03 22:35:58 发布
阅读量48 收藏
点赞数
原文链接：http://www.cnblogs.com/a511029/archive/2008/08/26/1276547.html
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 <script language="javascript">
function dhCombobox(){
 //author:dh20156;
 var dh = this;

 //返回实例名
 this.clsName = null;

 //定义目标对象
 this.targetObj = null;

 //定义提示框属性
 this.popWidth = 0;
 this.popHeight =50;

 //定义数据源（数组）
 this.arrayData = [];

 //定义匹配后的结果
 var nowHtml = null;

 //定义当前选定的结果
 var i_selected = 0;

 //定义光标键所在的位置
 var i_move = i_selected;

 //匹配用户输入字符结果
 Array.prototype.contains = function(o) {
 //alert("o"+o);
  var tc = [];
  var nc = 0;
  for(var i = 0, l = this.length; i < l; i++) {
   var Data1 = this[i].split(";");
  if(o!=null){
   if(this[i].indexOf(o) >= 0){
    if(this[i].indexOf(";") >= 0){
     var tempData = this[i].split(";");
     tc[nc++] = "<DIV id='cdiv"+nc+"'  value=\""+tempData[1]+"\"  οnmοuseοver=\"parent."+dh.clsName+".mouse_over(this);\" οnmοuseοut=\"parent."+dh.clsName+".mouse_out(this);\" οnclick=\"parent."+dh.clsName+".select(this);\">"+tempData[0]+"</DIV>";
    }else{
     tc[nc++] = "<DIV id='cdiv"+nc+"' value=\""+this[i]+"\" οnmοuseοver=\"parent."+dh.clsName+".mouse_over(this);\" οnmοuseοut=\"parent."+dh.clsName+".mouse_out(this);\" οnclick=\"parent."+dh.clsName+".select(this);\">"+this[i]+"</DIV>";
    }
 
    nc++;
   }
   }
  }
 
  if(nc>0){
 
   nowHtml = tc.join("");
 
   //alert(nowHtml);
   tc = null;
  }else{
   nowHtml = "";
  }
 }

 //匹配
 function searchKey(){
  var begin = new Date().getTime();
  var str = dh.targetObj.value;
  //alert("str匹配"+str);
 
 // if(str.replace(/\s/g,"") != ""){
   dh.arrayData.contains(str);
 
   showPop(nowHtml);
 
   i_selected = 1;
   getFocus();
 // }else{
  // if(dhpop.isOpen){
  //  dhpop.hide();
  // }
 // }
 //st.value = (new Date().getTime() - begin)+"ms";
 }

 //按键处理
 function pressKey(){
  var kc = event.keyCode;
  var obj = dhpop.document.all.fdiv;
  if(obj == "[object]"){
   var objcl = obj.childNodes.length;
   switch(kc){
    case 13: //回车
     if(i_move > 0){
      var oldchild = obj.childNodes[i_move-1];
      dh.select(oldchild);

      i_selected = i_move;
      dh.targetObj.blur();
     }
     break;
    case 33: //PgUp
     obj.doScroll("scrollbarPageUp");
     break;
    case 34: //PgDn
     obj.doScroll("scrollbarPageDown");
     break;
    case 38: //上箭头
     if(objcl > 0 && i_move > 0){

      if(i_move > 1){
       var oldchild = obj.childNodes[i_move-1];
       oldchild.style.background = "";
       oldchild.style.color = "";
      }

      if(i_move > 1){
       var objchild = obj.childNodes[i_move-2];
       objchild.style.background = "highlight";
       objchild.style.color = "highlighttext";
       if(obj.scrollTop >= objchild.offsetTop){
        objchild.scrollIntoView(true);
       }
      }

      if(i_move > 2){
       i_move--;
      }else{
       i_move = 1;
      }
      }
     break;
    case 40: //下箭头
     if(objcl > 0 && i_move <= objcl){

      if(i_move > 0 && i_move < objcl){
       var oldchild = obj.childNodes[i_move-1];
       oldchild.style.background = "";
       oldchild.style.color = "";
      }

      if(i_move < objcl){
       var objchild = obj.childNodes[i_move];
       objchild.style.background = "highlight";
       objchild.style.color = "highlighttext";
       if(obj.scrollTop+dh.popHeight-objchild.offsetHeight-1 <= objchild.offsetTop){
        objchild.scrollIntoView(true);
       }
      }

      if(i_move < objcl){
       i_move++;
      }
     }
     break;
    default : //其他键
     if(!dhpop.isOpen){
      if(nowHtml != null){
       showPop(nowHtml);
      }else{
       showPop(popHtml);
      }
     }
     i_move = 0;
     break;
   }
  }
 }

 //选择匹配结果
 this.select = function(obj){
  this.targetObj.value = obj.value;
  dhpop.hide();
  this.targetObj.blur();
  i_selected = 1;
 }

 //鼠标指向匹配结果事件
 this.mouse_over = function(obj){
  obj.style.background = "highlight";
  obj.style.color = "highlighttext";
 }

 //鼠标离开匹配结果事件
 this.mouse_out = function(obj){
  obj.style.background = "";
  obj.style.color = "";
 }

 //定义提示框
 //?????????  dhpop
 var dhpop = window.createPopup();
 //对文本框赋值
//parent.document.all.ipt.value=document.getElementById("<%= HiddenField2.ClientID%>").value;

 //弹出提示框
 function showPop(str){
 //alert("str=提示框"+str);
  var objstr = dh.targetObj.value;
 // alert("objstr="+objstr);
  //if(objstr.replace(/\s/g,"") != ""){
  //????
   var dhpopBody = dhpop.document.body;

   if(str != null){

    dhpopBody.innerHTML = "<DIV id=\"fdiv\" style=\"width:"+(dh.popWidth-1)+";height:"+(dh.popHeight-1)+";overflow-y:auto;overflow-x:auto;cursor:default;\" onselectstart=\"return false\" οncοntextmenu=\"return false\">"+str+"</DIV>";
   }else{
    dhpopBody.innerHTML = "";
   }

   if(!dhpop.isOpen){
    var popObj = dh.targetObj;
    var popLeft = 2;
    var popTop = popObj.clientHeight+4;
    var popWidth = dh.popWidth;
    var popHeight = dh.popHeight;
    dhpopBody.style.border = "1px solid buttonshadow";
    dhpopBody.style.background = "lightyellow";
    dhpopBody.style.fontFamily = "arial";
    dhpopBody.style.fontSize = "12px";
    dhpopBody.style.scrollbarFaceColor = "lightyellow";
    dhpopBody.style.scrollbarShadowColor = "lightyellow";
    dhpopBody.style.scrollbarBaseColor = "buttonface";
    dhpopBody.style.scrollbarTrackColor = "black";
    dhpopBody.style.scrollbarHighlightColor = "lightyellow";
    dhpopBody.style.scrollbarDarkShadowColor = "buttonshadow";
    dhpop.show(popLeft,popTop,popWidth,popHeight,popObj);
    //???
  //  parent.document.all.ipt.value=document.getElementById("<%= HiddenField2.ClientID%>").value;
  // }
  }
 }

 //获得选择的结果焦点
 function getFocus(){
  if(dhpop.isOpen){
   var obj = dhpop.document.all.fdiv;
   if(obj == "[object]"){
    var objcl = obj.childNodes.length;
    if(i_selected > 0 && objcl>0 && i_selected <= objcl){
     var objchild = obj.childNodes[i_selected-1];
     objchild.style.background = "highlight";
     objchild.style.color = "highlighttext";
     objchild.scrollIntoView(true);
     i_move = i_selected;
    }
    if(objcl == 1){
     var objchild = obj.childNodes[0];
     objchild.style.background = "highlight";
     objchild.style.color = "highlighttext";
     objchild.scrollIntoView(true);
     i_move = i_selected;
    }
   }
  }
 }

 //对象实例化
 this.setup = function(){
  if(this.popWidth == 0){
   this.popWidth = this.targetObj.clientWidth;
  }
 
  var targetObj = this.targetObj;
  targetObj.onclick = function(){searchKey();showPop(nowHtml);getFocus();targetObj.onpropertychange = function(){searchKey();}}
  targetObj.onkeydown = function(){pressKey();targetObj.onpropertychange = function(){searchKey();}}

 }
}
</script>
 </HEAD>

 <BODY>
        <input type="text" id="ipt" name="ipt">
     <asp:HiddenField ID="HiddenField1" runat="server"/>
     <asp:HiddenField ID="HiddenField2" runat="server"/>
<script language="javascript">
var ads = new Array();
ads[0]="啊啊啊啊啊啊啊啊啊啊a ";
ads[1]="杭州出版社h";
ads[2]="黑龙江出版社h ";
ads[3]="宁夏出版社n";
ads[4]="清华出版社q";
 var dhcomb = new dhCombobox();
  dhcomb.clsName = "dhcomb";
  dhcomb.targetObj = document.all.ipt;//document.get
  dhcomb.arrayData = ads;
 dhcomb.setup();
 ads = null;
 </script>
 </BODY>
</HTML>

转载于:https://www.cnblogs.com/a511029/archive/2008/08/26/1276547.html

weixin_30675247
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可输入下拉列表_带自动提示（原创）
04-09
NULL 博文链接：https://wangzy24.iteye.com/blog/1515572
可输入下拉列表框
05-07
"可输入下拉列表框"是一种结合了传统下拉选择框与输入框功能的创新设计，它允许用户既可以点击下拉选项，也可以直接输入关键词进行搜索。这种元素在数据量较大或需要快速定位信息时尤其有用。下面我们将详细探讨这种...
可输入的下拉列表框
混沌牙界
05-25 1352
选择邮箱 sina.com sohu.com tom.com 126.com 163.com yahoo.com.cn kingsoft.com使用css2.0的 clip属性实现
实现可输入的下拉框
安歌
12-29 9216
第一种方式：input + select &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;js实现可输入的下拉框&lt;/title&gt; &lt;style type="text/css"&gt; .wrap { position: relative; } .
可输入可选择的下拉列表
mikemiller2的专栏
01-02 782
js实现可输入的下拉框 德国 挪威 瑞士
Android 下拉列表 可手动输入
01-16
标题“Android 下拉列表 可手动输入”正是针对这种需求，提供了一种解决方案，让Spinner具备输入功能。 描述中提到的“精简过，很简单，直接可以使用”，意味着这个实现是经过优化的，具有较低的学习曲线，开发者...
可选择和输入的下拉列表框示例
09-04
在网页设计和开发中，创建一个既可选择又可输入的下拉列表框可以提供用户更灵活的交互体验。这样的设计允许用户在预设的选项中选择，同时也可以自定义输入他们自己的值。这种功能通常用于那些可能有固定选项但又允许...
LabVIEW实现下拉列表菜单
03-01
在LabVIEW编程环境中，下拉列表控件（Dropdown Control）是一种常见的用户界面元素，它允许用户从一组预定义的选项中进行选择。本教程将详细讲解如何使用LabVIEW实现下拉列表菜单及其功能。 首先，下拉列表控件在...
可输入的下拉框
weixin_43719616的博客
03-03 1823
原理是在select下拉框上面加一个input框 1.写好select下拉框和input框 <span class="wrap">合同类别： <select id="htlb_category" name="htlb_category" class="select" onchange="htlbInput()"> <option class="mini-textbox" name ="开发" id ="开发" value
可输入可选择的下拉框（input select）并且输入框获得下拉的内容
热门推荐
汪缓的博客
12-01 3万+
1、JSP代码                   请选择.... 11 22 33 2、JS方法 function setRuleContent(){        var selectValue = $('#_select option:selected').text();//选中select的内容        //alert("select
自定义可输入的下拉列表
u012681635的博客
02-08 1622
简单易用，绑定一个div就能生成下拉列表new Selector()的参数1：HTMLDivElement或div元素的id:，参数2（可选）：选项数据的数组，参数3（可选）：文本框值或选项改变时的回调函数(value, index, selector),下面有例子方法介绍，除getValue()方法外的其他方法都支持链式调用Selector的自定义方法方法方法作用其它说明setBoxCss(js...
HTML/jQuery/js实现可编辑可输入下拉框
╮(╯_╰)╭ Don't expect me to reply to you in time
08-16 8559
1、方案一 方案思路：输入框和下拉小三角紧密拼合，使样式上看起来像一个单纯的下拉框 ① 优点：思路清晰，实现简单 ② 缺点：样式很难做兼容 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;InputSelect&a
可输入下拉框
qq_41622603的博客
03-14 3832
效果图 原理:在下拉框前面加多一个input输入框,把下拉框的值赋给input 需要给input加入样式，让input跟下拉框对齐 HTML代码: &lt;select id="vehicleAgent"&gt; &lt;option value=""&gt;--请选择--&lt;/option&gt;&lt;option value=""&g...
既可以输入新的信息，又可以从下拉框中选择的代码
程序人生
08-10 5682
既可以输入新的信息，又可以从下拉框中选择： 蓝色经典 织梦地带 联盟论坛 无忧脚本
input既可以输入又可以下拉列表选择
老四的博客
05-03 1万+
最近在业务上碰到一个需求，输入框既可以输入又可以下拉选择，解决方法就是H5的新标签datalist ，下面直接上代码：&lt;input type="text" name="feng_kong_cuo_shi_1" list="feng_kong_cuo_shi_1" maxlength="20"&gt; &lt;datalist id="feng_kong_cuo_shi_1" st
可输入的下拉列表(带搜索功能)
天翔的专栏
01-29 7466
Editable listbox/* Common elements */body{font:small/1.2em arial,helvetica,clean,sans-serif;font:x-small;}table{font-size:inherit;font:x-small;}/* Options Templates */.ac_menu{border:1px solid #
react写一个可输入查询的下拉列表
最新发布
03-31
以下是一个简单的 React 下拉列表代码，它允许用户在输入框中输入查询，并根据用户输入的字符动态更新下拉列表： ```javascript import React, { useState } from "react"; const Dropdown = ({ options }) => { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值