ajax实现的输入框文字变化显示下拉列表效果的例子

1。风格
复制代码代码如下所示：

<！——
背景：# FFF身体{ }
{。菜单
职位：相对；
宽度：180px；
身高：120px；
Z指数：1；
背景：# Eee；
边境：1px solid # 666；
边距：- 100px；
显示：无；
}
{。menu2
位置：绝对；
左：0；
顶部：0；
宽度：100%；
身高：120px；
溢出：隐藏；
Z指数：1；
overflow-y：汽车；
}
。menu2 UL { margin: 0；padding: 0 }
。menu2 ul {宽度：100%；高度：25px；线高度：20px；文本缩进：15px；
底部边框：1px冲# 999；颜色：# 333；鼠标指针；
改变：表达式（
这个onmouseover =函数（）{
这个样式。背景；
}，
本。onmouseout=函数（）{
这个样式。背景；
}
）
}
输入{宽度：120px }
# List1，#清单{左：0px；顶部：103px；}
-->


2。HTML脚本
复制代码代码如下所示：
…不规则的脚本


汽车品牌：

禁用=残疾人事件=showandhide（'list1 '，'show '）；onblur =showandhide（'list1 '，'hide '）；

要求*


——%>
宝马——% >
奥迪——% >
——%>






…不规则的脚本

汽车制造商名称：

禁用=残疾人事件=showandhide（'list2 '，'show '）；onblur =showandhide（'list2 '，'hide '）；

要求*








三.通过js实现ajax异步请求，过滤输入内容
复制代码代码如下所示：
加载页面时

函数（$）{
如果（navigator.useragent.indexof（MSIE）> 0）{
document.getelementbyid（'generalbrandname）。AttachEvent（onpropertychange
document.getelementbyid（'brandname）。AttachEvent（onpropertychange
}
如果（navigator.useragent.indexof（火狐）> 0）{
document.getelementbyid（'generalbrandname）AddEventListener（输入。
document.getelementbyid（'brandname）AddEventListener（输入。
}
}）；

预加载
函数（$）{
txtvalue = $（# generalbrandname ）瓦迩（）；
/ / / / / / / /绑定txtbox键盘事件
$（# generalbrandname）。Bind（KeyUp
无功电流= $（this）瓦迩（）；
如果（电流值！= txtvalue）{
appendlist（'list1，电流值）；
txtvalue =电流；
}
}）；

txtvalue = $（#名优产品）的瓦迩（）；
/ / / / / / / /绑定txtbox键盘事件
$（#名优产品），Bind（KeyUp
无功电流= $（this）瓦迩（）；
如果（电流值！= txtvalue）{
appendlist（'list2，电流值）；
txtvalue =电流；
}
}）；

}）；

动态显示下拉列表功能的内容

根据输入框的值在目标 / /值的选择
功能appendlist（obj值）{
价值= encodeURIComponent（价值）；价值= encodeURIComponent（价值）； / / encodeURI（两次）
开关（obj）{
案例表的品牌名称： / /根据车辆选择值表
getJSON（美元。
CTX + / / /车carmodel **。做
{关键词：价值、身份：新的日期（）GetTime（）}，
函数（JSON）{
CreateLis（'listli1，JSON）；
}
）；
打破；
案例清单：根据制造商的名称，汽车/选择价值清单
getJSON（美元。
CTX + / / /车carmodel **。做
{关键词：价值、身份：新的日期（）GetTime（）}，
函数（JSON）{
CreateLis（'listli2，JSON）；
}
）；
打破；
}
}

功能createlis（obj，JSON）{
开关（obj）{
案例listli1品牌名称： / /根据车辆选择值表
无功executerdiv = document.getelementbyid（obj）； / /动态下拉列表框
executerdiv .innerHTML = ；
VaR UL = document.createelement（UL）；
$（JSON，函数（i，item）{）
VaR李= document.createelement（礼）；
var str =getValue（'generalbrandname '、'）+项目。brandnamegeneral +
li.setattribute（onmousedown
li.appendchild（document.createtextnode（项目。brandnamegeneral））；
ul.appendchild（李）；
}）；
executerdiv.appendchild（UL）；
打破；
案例listli2 ：根据制造商的名称，汽车/选择价值清单
无功executerdiv = document.getelementbyid（obj）； / /动态下拉列表框
executerdiv .innerHTML = ；
VaR UL = document.createelement（UL）；
$（JSON，函数（i，item）{）
VaR李= document.createelement（礼）；
var str =getValue（'brandname '、'）+品牌+项目。
li.setattribute（onmousedown
li.appendchild（document.createtextnode（项目品牌））；
ul.appendchild（李）；
}）；
executerdiv.appendchild（UL）；
打破；
}
}
显示或隐藏层
功能showandhide（obj类型）{
VAR层= window.document.getelementbyid（obj）；
开关（类型）{
案例显示：
图层样式；
appendlist（obj，）；
打破；
案例隐藏：
图层样式；
打破；
}
}

获取选定的节点内容
功能getValue（obj1，STR，obj2，IDX）{
无功输入= window.document.getelementbyid（obj1）；
输入值；
无功输入= window.document.getelementbyid（obj2）；
输入值为IDX；
}

4。显示效果