<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>可输入的下拉框</TITLE>
</HEAD>
<BODY >
<Script Language="Javascript">
var j = 0;
function SelectValue(obj)
{
var input = obj.parentNode.nextSibling;
document.all.box2.value = obj.options[obj.selectedIndex].text;
document.getElementById("txtSection").value=obj.options[obj.selectedIndex].value;
alert(document.getElementById("txtSection").value);
}
function InputValue(obj)
{
var n = 1;
var tmpObj;
var src = document.all.SelectOption;
var msg = document.all.msg;
if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){
if(obj.value!=""){
msg.style.display="";
msg.innerHTML="";
if(msg.hasChildNodes())
{
msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]);
}
for (var i=0;i<src.length;i++){
var selValue = document.createElement("div");
var selText = document.createElement("div");
selText.value = src(i).value;
selText.innerHTML = src(i).text;
if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){
selText.setAttribute("id","selText"+n);
selText.onmouseover=function (){
this.style.backgroundColor='#003399';
this.style.color ='#ffffff';
}
selText.onmouseout=function (){
this.style.backgroundColor='#ffffff';
this.style.color ='#000000';
}
selText.onclick=function (){
document.all.box2.value = this.innerHTML;
msg.style.display="none";
document.getElementById("txtSection").value=this.value;
}
msg.appendChild(selText);
n++;
}
}
}
else {
document.all.msg.style.display="none";
}
}
else {
//press down key
if(event.keyCode==40){
j++;
for (var i=0; i<src.length; i++)
{
tmpObj = document.getElementById("selText"+i);
if(tmpObj != null){
tmpObj.style.backgroundColor='#ffffff';
tmpObj.style.color ='#000000';
}
}
tmpObj = document.getElementById("selText"+j);
if(tmpObj != null){
tmpObj.style.backgroundColor='#003399';
tmpObj.style.color ='#ffffff';
}else{
j = 0;
}
}
//press up key
if (event.keyCode==38){
j--;
for (var i=0; i<src.length; i++)
{
tmpObj = document.getElementById("selText"+i);
if(tmpObj != null){
tmpObj.style.backgroundColor='#ffffff';
tmpObj.style.color ='#000000';
}
}
tmpObj = document.getElementById("selText"+j);
if(tmpObj != null){
tmpObj.style.backgroundColor='#003399';
tmpObj.style.color ='#ffffff';
}else{
j = 2;
}
}
//press enter key
if (event.keyCode==13){
tmpObj = document.getElementById("selText"+j);
document.all.box2.value = tmpObj.innerHTML;
msg.style.display="none";
document.getElementById("txtSection").value=tmpObj.value;
}
}
}
function SelMatch(src)
{
var currSel = document.all.box2.value;
for (var i=0;i<src.length;i++){
if (src(i).text==currSel)
{
src.options(i).selected = true;
}
}
}
function NoMsg()
{
if(document.activeElement.id=="msg")
return false;
else
document.all.msg.style.display='none';
}
</Script>
<TABLE border=0 cellPadding=1 cellSpacing=0 width="100%">
<TR>
<TD width="24%"><font face="Arial" size="2">Section</font></TD>
<TD COLSPAN=3 width="76%">
<div style="position:relative;">
<span style="margin-left:230px;width:18px;overflow:hidden;">
<select style="HEIGHT: 22px; WIDTH: 250px; margin-left:-232px;" onchange="SelectValue(this)" onclick="SelMatch(this)" id="SelectOption" name="SelectOption" >
<OPTION value='ALL' Selected>ALL</OPTION>
<OPTION value='0TEST1'>0TEST1 = Testing 1
<OPTION value='0TEST1'>0TEST2 = Testing 1
<OPTION value='0TEST1'>0TEST3 = Testing 1
<OPTION value='SECTION'>SECTION = Section Description XXXXX AAA
</OPTION>
</select></span>
<input name="box2" id="box2" style="width:230px;position:absolute;left:0px;" onkeyup="InputValue(this)" onblur="NoMsg()" onfocus="this.select();InputValue(this)" value="0" >
<div id="msg" style="border:1px solid green; font-size :14PX;white-space:nowrap;overflow:hidden;
width:230px;position:absolute;left:0px;top:20px;display:none"></div>
</div>
<Input Type="Hidden" Name="txtSection" id="txtSection">
</TD>
</TR>
</TABLE>
<p>
</BODY></HTML>
相关推荐
在JavaScript和jQuery的世界里，"js 可输入下拉框（jquery）"是一个常见的交互设计需求，它结合了传统下拉框的简洁性与输入框的搜索功能，为用户提供更友好的交互体验。这种组件通常被称为“Autocomplete”或...
简单javavscript实现的可输入下拉框（仿VC的comobox），用于html网页开发。 不懂代码的，可直接在页面中插入该源码实现，方便易用。
在网页设计中，"可输入下拉框"（通常称为Autocomplete或Typeahead下拉框）是一种增强用户体验的交互元素。传统的HTML `<select>` 标签仅允许用户从预定义的选项中选择，但可输入下拉框允许用户在输入时获取匹配建议...
以上就是两种创建可输入下拉框的方法。在实际项目中，可以根据需求和兼容性考虑选用合适的方式。同时，我们可以通过CSS来定制样式，使交互更加友好和美观。记得在开发过程中，始终以用户为中心，提供流畅、直观的...
将CheckBox Text两个空间结合，简易的制作可输入下拉框
开发者可能会利用库或框架，如React、Vue或Angular，它们提供了丰富的组件库，包括可输入下拉框的实现。这些框架允许开发者通过简单的配置和API调用来实现复杂的功能，比如事件监听、数据绑定和动态过滤。 在实际...
在IT行业中，"comBox可输入下拉框"是一种常见的用户界面组件，它结合了文本输入框和下拉选择框的功能。这样的设计旨在提供更灵活的用户体验，允许用户既可以手动输入值，也可以从预设的选项中进行选择。在网页开发中...
标题中的“可输入下拉框”通常指的是在网页或应用程序设计中的一种交互元素，它结合了文本输入框和下拉列表的功能。用户可以既可以直接在输入框中输入文本，也可以从下拉列表中选择已有选项，这种设计常用于提供用户...
在IT行业中，"可输入下拉框"是一种常见的交互元素，它结合了传统下拉列表与文本输入框的功能，让用户可以既从预设选项中选择，又可以直接输入自定义值。这种控件在网页和应用程序设计中十分常见，因为它们提高了用户...
本文将详细介绍"可输入下拉框jQuery插件"的相关知识点。 首先，jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在本插件中，jQuery起到了核心作用，通过它的API和方法实现了...
本主题聚焦于一个特定的jQuery插件，即“可输入下拉框”插件，它提供了丰富的功能，如自动完成和模糊查询，极大地提升了用户在网页上的交互体验。 首先，我们要理解什么是“可输入下拉框”。传统的HTML下拉框（`...
二、可输入下拉框控件 为了实现一个可输入的下拉框，我们可以利用JavaScript或者jQuery库来增强原生的HTML下拉框。这样的控件允许用户在输入框中直接键入文本，同时仍然提供下拉列表供用户选择。当用户开始输入时，...
在这种情况下，“asp.net可输入可选择下拉框”应运而生，它结合了文本框和下拉框的优点，提供了更灵活的交互体验。 首先，我们需要理解这个自定义用户控件的工作原理。通常，它是通过JavaScript或者jQuery在客户端...
利用input框和select框的组合设计的可输入下拉框，并支持键盘按钮实现上下移动。
仿百度google的自动搜索可输入下拉框, 本人开发的， 网上的都不好用，郁闷，提手花了一天半呢
4. Vue.js、React等前端框架：它们提供了组件化开发方式，也有对应的可输入下拉框组件。 五、代码示例 以下是一个使用纯JavaScript实现的简单例子： ```html <option value="option1">Option 1 ...