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

 更新时间:2014年03月05日 11:22:39   作者:  
这篇文章主要介绍了通过ajax实现输入框文字改变展示下拉列表的效果,需要的朋友可以参考下
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.展示效果

相关文章

  • jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

    jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

    CSS也使得表格的布局越来越光彩耀人。但是,无论如何,都掩饰不了那些包装下的死板,接下来为大家介绍下让那些死板的数据 更具有可读性、可用性
    2013-04-04
  • Ajax 核心框架函数及例子

    Ajax 核心框架函数及例子

    最近学习js,肯定会学到ajax中的东西,所以,看到比较好的ajax函数,免不得要贴出来,供大家参考。这个函数摘录自john resig的书中。
    2009-09-09
  • ajax实现select三级联动效果

    ajax实现select三级联动效果

    这篇文章主要为大家详细介绍了ajax动态实现select三级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • asp.net jquery+ajax异步刷新实现示例

    asp.net jquery+ajax异步刷新实现示例

    异步刷新想必大家并不陌生吧,本文主要为大家介绍下asp.net jquery+ajax实现异步刷新过程,感兴趣的朋友可以参考下
    2013-09-09
  • Ajax异步方式实现登录与验证

    Ajax异步方式实现登录与验证

    这篇文章主要介绍了Ajax异步方式实现登录与验证,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • ajax实现简单登录页面

    ajax实现简单登录页面

    这篇文章主要为大家详细介绍了ajax实现简单登录页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Ajax + PHP session制作购物车

    Ajax + PHP session制作购物车

    这篇文章主要为大家详细介绍了Ajax结合PHP session制作购物车,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 用iframe设置代理解决ajax跨域请求问题

    用iframe设置代理解决ajax跨域请求问题

    面对ajax跨域请求的问题,想用代理的方式来解决这个跨域问题。在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理
    2013-11-11
  • IE8/IE9下Ajax缓存问题

    IE8/IE9下Ajax缓存问题

    本文给大家介绍的IE8/IE9下Ajax缓存问题的解决办法,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧
    2016-07-07
  • ajax跨页面提交表单

    ajax跨页面提交表单

    这篇文章主要为大家详细介绍了ajax跨页面提交表单的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10

最新评论