当前位置： 移动技术网 > IT编程>脚本编程>Ajax > ajax实现输入框文字改变展示下拉列表的效果示例

ajax实现输入框文字改变展示下拉列表的效果示例

2017年12月12日  | 移动技术网IT编程  | 我要评论
1.样式
复制代码 代码如下:

<style type="text/css">
<!--
body{background:#fff}
.menu {
position:relative;
width:180px;
height:120px;
z-index:1;
background: #eee;
border:1px solid #666;
margin-top:-100px;
display:none;
}
.menu2 {
position: absolute;
left:0;
top:0;
width:100%;
height:120px;
overflow:hidden;
z-index:1;
overflow-y:auto;
}
.menu2 ul{margin:0;padding:0}
.menu2 ul li{width:100%;height:25px;line-height:20px;text-indent:15px;
border-bottom:1px dashed #999;color:#333;cursor:pointer;
change:expression(
this.onmouseover=function(){
this.style.background="";
},
this.onmouseout=function(){
this.style.background="";
}
)
}
input{width:120px}
#list1,#list2{left:0px;top:103px;}
-->
</style>

2. html脚本
复制代码 代码如下:

........省略常规脚本

<tr>
<th>汽车品牌名：</th>
<td>
<input type="text" id="generalbrandname" name="generalbrandname" value="${*.generalbrandname}" style="width:180px" data-validation-engine="validate[required]" <c:if test="${!empty cartype.brandidgeneral}"> disabled="disabled" </c:if> onfocus="showandhide('list1','show');" onblur="showandhide('list1','hide');"/>
<input type="hidden" id="brandidgeneral" name="brandidgeneral" value="${*.brandidgeneral}" style="width:180px" />
<span class="required">必填*</span>
<div class="menu" id="list1">
<div class="menu2" id="listli1">
<%-- <ul>--%>
<%-- <li onmousedown="getvalue('generalbrandname','宝马','brandidgeneral','idx');showandhide('list1','hide');">宝马</li>--%>
<%-- <li onmousedown="getvalue('generalbrandname','奥迪','brandidgeneral','idx');showandhide('list1','hide');">奥迪</li>--%>
<%-- </ul>--%>
</div>
</div>

</td>
</tr>

........省略常规脚本
<tr>
<th>汽车厂商名：</th>
<td>
<input type="text" id="brandname" name="brandname" value="${*.brandname}" style="width:180px" data-validation-engine="validate[required]" <c:if test="${!empty cartype.brandid}"> disabled="disabled" </c:if> onfocus="showandhide('list2','show');" onblur="showandhide('list2','hide');" />
<input type="hidden" id="brandid" name="brandid" value="${*.brandid}" style="width:180px" />
<span class="required">必填*</span>
<div class="menu" id="list2">
<div class="menu2" id="listli2">
</div>
</div>

</td>
</tr>

3.通过js来实现ajax异步请求 根据输入的内容过滤
复制代码 代码如下:

//页面加载的时候

jquery(function($) {
if (navigator.useragent.indexof("msie") > 0) {
document.getelementbyid('generalbrandname').attachevent("onpropertychange", appendlist);
document.getelementbyid('brandname').attachevent("onpropertychange", appendlist);
}
else if (navigator.useragent.indexof("firefox") > 0) {
document.getelementbyid('generalbrandname').addeventlistener("input", appendlist, false);
document.getelementbyid('brandname').addeventlistener("input", appendlist, false);
}
});

//////// 预加载
jquery(function($) {
txtvalue = $("#generalbrandname").val();
//////// 给txtbox绑定键盘事件
$("#generalbrandname").bind("keyup", function() {
var currentvalue = $(this).val();
if (currentvalue != txtvalue) {
appendlist('list1',currentvalue);
txtvalue = currentvalue;
}
});

txtvalue = $("#brandname").val();
//////// 给txtbox绑定键盘事件
$("#brandname").bind("keyup", function() {
var currentvalue = $(this).val();
if (currentvalue != txtvalue) {
appendlist('list2',currentvalue);
txtvalue = currentvalue;
}
});

});

//实现动态显示下拉列表内容的function

//根据输入框中的值来筛选obj中的值
function appendlist(obj,value){
value = encodeuricomponent(value); value = encodeuricomponent(value); //两次使用encodeuri()
switch(obj){
case "list1": //根据车品牌名来刷选list1中的值
$.getjson(
ctx + "/car/carmodel/**.do",
{keyword : value, id : new date().gettime()}, <!-- 产生一个时间戳，不让ie以为是相同的url而使用cache -->
function (json) {
createlis('listli1',json);
}
);
break;
case "list2": //根据车厂商名来刷选list2中的值
$.getjson(
ctx + "/car/carmodel/**.do",
{keyword : value, id : new date().gettime()}, <!-- 产生一个时间戳，不让ie以为是相同的url而使用cache -->
function (json) {
createlis('listli2',json);
}
);
break;
}
}

function createlis(obj,json){
switch(obj){
case "listli1": //根据车品牌名来刷选list1中的值
var executerdiv = document.getelementbyid(obj); //动态生成下拉列表框
executerdiv.innerhtml="";
var ul=document.createelement("ul");
$.each(json, function (i, item) {
var li=document.createelement("li");
var str = "getvalue('generalbrandname','"+item.brandnamegeneral+"','brandidgeneral','"+item.brandidgeneral+"');showandhide('list1','hide')";
li.setattribute("onmousedown",str);
li.appendchild(document.createtextnode(item.brandnamegeneral));
ul.appendchild(li);
});
executerdiv.appendchild(ul);
break;
case "listli2": //根据车厂商名来刷选list2中的值
var executerdiv = document.getelementbyid(obj); //动态生成下拉列表框
executerdiv.innerhtml="";
var ul=document.createelement("ul");
$.each(json, function (i, item) {
var li=document.createelement("li");
var str = "getvalue('brandname','"+item.brandname+"','brandid','"+item.brandid+"');showandhide('list1','hide')";
li.setattribute("onmousedown",str);
li.appendchild(document.createtextnode(item.brandname));
ul.appendchild(li);
});
executerdiv.appendchild(ul);
break;
}
}
//显示或者隐藏层
function showandhide(obj,types){
var layer=window.document.getelementbyid(obj);
switch(types){
case "show":
layer.style.display="block";
appendlist(obj,'');
break;
case "hide":
layer.style.display="none";
break;
}
}

//获取选中节点的内容
function getvalue(obj1,str,obj2,idx){
var input=window.document.getelementbyid(obj1);
input.value=str;
var input=window.document.getelementbyid(obj2);
input.value=idx;
}

4.展示效果

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网