js实现下拉框根据输入值检索结果
来源:互联网 发布:淘宝哪家手办店好 编辑:程序博客网 时间:2024/05/16 23:36
页面显示部分:
<div style='position: relative;' id="macDiv">
<span style='margin-left: 100px; width: 20px; overflow: hidden;'><select name='macIp' id='macIp'style='height: 22px; width: 122px;margin-left: -100px;'></select>
</span>
<input name='inputInfo' id='inputInfo'style=' width: 100px; position: absolute; left: 0px; font-size: 14px'
onkeyup='InputValue(this)' onblur='NoMsg()'
onfocus='clearInput();this.select();InputValue(this);'>
<div id='msg' style='border: 1px; font-size: 14px; white-space: nowrap; overflow: hidden; width: 122px; position:absolute; left: 0px; top: 20px; display: none'></div>
<input type='hidden' name='txtSection' id='txtSection'>
</div>
js实现部分:
function initMacselect()
{
$("#macIp").change(function() {
$("#inputInfo").attr("value", $("#macIp option:selected").text());
});
$.ajax({
url : "<%=contextPath%>/iCReaderInfoController/getMacOptions.do",
async : true,
type : "post",
success : function(data)
{
$("#macIp").append(data);
$("#inputInfo").attr("value", $("#macIp option:selected").text());
}
});
}
var j = 0;
function InputValue(obj) {
var n = 1;
var tmpObj;
var src = document.all.macIp;
var length = $("#macIp option").length;
var msg = document.all.msg;
if(event.keyCode == 40)//press key
{
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;
}
}
else if(event.keyCode == 38)//press key up
{
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;
}
}
else if(event.keyCode == 13)//press enter key
{
tmpObj = document.getElementById("selText" + j);
$("#inputInfo").attr("value",tmpObj.innerHTML);
$("#msg").css("display", "none");
$("#txtSection").attr("value", tmpObj.value);
}
else
{
if (obj.value != "") {
$("#msg").css("display", "");
msg.innerHTML = "";
if (msg.hasChildNodes()) {
msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]);
}
for ( var i = 0; i < src.length; i++) {
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.inputInfo.value = this.innerHTML;
$("#inputInfo").attr("value", this.innerHTML);
$("#macIp").attr("value", this.value);
$("#msg").css("display", "none");
$("#txtSection").attr("value", this.value);
};
msg.appendChild(selText);
n++;
}
}
} else {
$("#msg").css("display", "none");
}
}
}
function NoMsg() {
if (document.activeElement.id == "msg")
return false;
else
$("#msg").css("display", "none");
}
function clearInput()
{
$("#inputInfo").attr("value","");
}
- js实现下拉框根据输入值检索结果
- jquery 输入框 根据输入内容检索 下拉提示
- 下拉框输入检索
- js根据输入内容自动填充下拉框
- js实现可输入的下拉框
- AJAX.NET实现根据输入内容自动填充下拉框
- MagicSuggest实现根据输入进行选择提示的下拉框
- js实现在编辑框input下根据输入内容显示匹配内容的下拉列表(一)
- js实现在编辑框input下根据输入内容显示匹配内容的下拉列表(二)
- 根据输入的值进行动态检索
- 搜索框根据输入自动提示--js实现
- 根据验证结果js设置输入焦点(focus)
- input输入框下拉提示、js的keyup的实现、
- 【转载】实现输入文件夹输入检索类型输出相应结果0.01
- js实现根据下拉列表动态改变其他层
- 纯JS 输入框 onkeyup 下拉框
- js 可输入的下拉框
- JS实现是一个文本框(值为参数)输入另一个显示(查询结果)
- 打开子页面的方法以及子页面刷新父页面的方法
- SSH框架 bug记录
- Cocos2d-x 3.0 及以上常用函数
- vc中让列表框可编辑
- android绘制view的过程(自定义view一)
- js实现下拉框根据输入值检索结果
- ScrollView嵌套Scrollview滑动冲突
- HDU 1071 The area
- UpdateLayeredWindow与SetLayeredWindowAttributes
- Qt5 oracle数据库驱动编译
- Java开发之ArrayList 和LinkedList各自的特点是什么
- 程序员创业的十大心得
- hdu 2416 Treasure of the Chimp Island(bfs求最短路)
- shell文本过滤编程(四):awk内置变量及一般变量