$(document).ready(
function
() {
var
cus = 0;
var
classname =
""
;
var
arry =
new
Array();
var
$autocomplete = $(
"<ul class='autocomplete'></ul>"
).hide().insertAfter(
"#box4"
);
$(
"#hoho"
).find(
"option"
).each(
function
(i, n) {
arry[i] = $(
this
).text()
});
$(
"#box4"
).keyup(
function
(event) {
if
((event.keyCode != 38) && (event.keyCode != 40) && (event.keyCode != 13)) {
$autocomplete.empty();
var
$SerTxt = $(
"#box4"
).val().toLowerCase();
if
($SerTxt !=
""
&& $SerTxt !=
null
) {
for
(
var
k = 0; k < arry.length; k++) {
if
(arry[k].toLowerCase().indexOf($SerTxt) >= 0) {
$(
"<li title="
+ arry[k] +
" class="
+ classname +
"></li>"
).text(arry[k]).appendTo($autocomplete).mouseover(
function
() {
$(
".autocomplete li"
).removeClass(
"hovers"
);
$(
this
).css({
background:
"#3368c4"
,
color:
"#fff"
})
}).mouseout(
function
() {
$(
this
).css({
background:
"#fff"
,
color:
"#000"
})
}).click(
function
() {
$(
"#box4"
).val($(
this
).text());
$autocomplete.hide()
})
}
}
}
$autocomplete.show()
}
var
listsize = $(
".autocomplete li"
).size();
$(
".autocomplete li"
).eq(0).addClass(
"hovers"
);
if
(event.keyCode == 38) {
if
(cus < 1) {
cus = listsize - 1;
$(
".autocomplete li"
).removeClass();
$(
".autocomplete li"
).eq(cus).addClass(
"hovers"
);
var
text = $(
".autocomplete li"
).eq(cus).text();
$(
"#box4"
).val(text)
}
else
{
cus--;
$(
".autocomplete li"
).removeClass();
$(
".autocomplete li"
).eq(cus).addClass(
"hovers"
);
var
text = $(
".autocomplete li"
).eq(cus).text();
$(
"#box4"
).val(text)
}
}
if
(event.keyCode == 40) {
if
(cus < (listsize - 1)) {
cus++;
$(
".autocomplete li"
).removeClass();
$(
".autocomplete li"
).eq(cus).addClass(
"hovers"
);
var
text = $(
".autocomplete li"
).eq(cus).text();
$(
"#box4"
).val(text)
}
else
{
cus = 0;
$(
".autocomplete li"
).removeClass();
$(
".autocomplete li"
).eq(cus).addClass(
"hovers"
);
var
text = $(
".autocomplete li"
).eq(cus).text();
$(
"#box4"
).val(text)
}
}
if
(event.keyCode == 13) {
$(
".autocomplete li"
).removeClass();
$(
"#HTML"
).html(
"你选择的是<font color='red'>"
+ $(
".autocomplete li"
).eq(cus).text()+
"</font>"
);
$autocomplete.hide();
}
}).blur(
function
() {
setTimeout(
function
() {
$autocomplete.hide()
},
3000)
})
});
function
setValue(index) {
var
ddl = document.getElementById(
"hoho"
);
var
Value = ddl.options[index].text;
document.getElementById(
"box4"
).value = Value
$(
"#HTML"
).html(
"你选择的是<font color='red'>"
+Value+
"</font>"
);
}
.hoho{ width : 197 ; height : 20px !important ; height : 17px ; margin-left : -180px !important ; margin-left : -179px }
.sp{ margin-left : 179px ; width : 18px ; overflow : hidden ; }
.bo 4 { width : 178px ; position : absolute ; left : 0px !important ; height : 20px !important ; top : 0.5px !important ; left : 1px ; top : 0px ; height : 20px }
.autocomplete{ list-style-type : none ; margin : 0px ; padding : 0px ; border : #008080 1px solid }
.autocomplete li{ font-size : 12px ; font-family : "Lucida Console" , Monaco, monospace ; font-weight : bold ; cursor : pointer ; height : 20px ; line-height : 20px }
.hovers{ background-color : #3368c4 ; color :fff}
|
<table width="440" border="0" align="center"> <tr> <td><div style="position:relative;"> <span class="sp"> <select id="hoho" name="hoho" class="hoho" onChange="setValue(this.selectedIndex)" > <option> ===请选择===</option> <option value='0' >Java EE</option> <option value='1' >Java SE</option> <option value='2' >Java ME</option> <option value='3' >Net</option> <option value='4' >PHP</option> <option value='5' >Ajax</option> <option value='6' >JQuer</option> </select> </span> <input name="box4" id="box4" value="===请选择===" class="bo4" > </div> </td> <td id="HTML" width="350">输入A试试</td> </tr> </table>
相关推荐
NULL 博文链接:https://jbeduhai.iteye.com/blog/1238774
可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框 可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框可输入下拉框
自己写了一个貌似面向对象的多选下拉框(js+DIV),大家可以自己扩展!
类似百度搜索框,可以输入的下拉框,输入信息后能自动匹配数据库里的数据,如果数据库里有马上都能显示出啦,用下拉选择马上可以选择。带数据库功能。本代码通过网友的代码改编整合。
灵活:数据源、下拉框内显示的列、列名、可搜索关键字等可自由定义 方便:可输可选/支持键盘操作/模糊过滤/自动完成匹配 标准:通过继承combobox实现,可单独使用,也可嵌入datagridview使用 感谢“随风飘散”
批量添加数据的表单界面(表单含树形下拉框)vue + element 通过【npm install】自行下载资源,生成node_modules文件夹
下拉框支持主流浏览器,兼容IE5/6/7/8/9/10,不兼容Edge 下拉框有模糊搜索功能 下拉框的值有两个,text、data_id 代码是基于jquery的,版本使用的:
自定义下拉框 预览:https://blog.csdn.net/SangHongxv/article/details/81746014
下拉框模糊查询; 可以输入可以直接选择,自动匹配; 非常简单,快捷
自动匹配,可输入可选择的下拉框 可手写,可选择 方便实用。
【ASP.NET编程知识】ASP .NET 可编辑输入自动匹配的下拉框.docx
js 可输入 下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框下拉框
支持手动输入的下拉框
简单javavscript实现的可输入下拉框(仿VC的comobox),用于html网页开发。 不懂代码的,可直接在页面中插入该源码实现,方便易用。
目前客户对于下拉框要求越来越高,希望即可以像文本框一样输入,又能够有固定的选项来选择,经过查找一些资料,然后由于项目需要,自己做了这样的用户控件,希望对广大开发者有点借鉴之用。
一个很好用的智能提示的下拉框组件,可以实现js端的下拉提示。
ASP .NET Webform 利用Telerik第三方Dropdownlist控制实现可编辑,输入自动匹配的下拉框(支持中文输入匹配),代码简单,适合下拉列表选项多时使用该控件,快速检索选项
ajax 自动 提示,输入框输入数据,会出现提示下拉框,有源码,可在Myeclipse下运行,简单易用,适合初学者
下拉框选择已有固定value,也可以选择后进行编辑,也可以直接输入数值。
数据库,仅用JS+XML实现无刷新。 将代码另存为city.htm和city.xml即可看到效果,不需要服务器支持