这篇文章主要介绍了通过ajax实现输入框文字改变展示下拉列表的效果,需要的朋友可以参考下
1.样式
登录后复制
2. html脚本
........省略常规脚本 汽车品牌名： disabled="disabled" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"/> 必填*
--%> 宝马--%> 奥迪--%> --%>
........省略常规脚本 汽车厂商名： disabled="disabled" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');" /> 必填*
登录后复制
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()}, function (json) { createLis('ListLi1',json); } ); break; case "List2": //根据车厂商名来刷选List2中的值 $.getJSON( ctx + "/car/carmodel/**.do", {keyWord : value, id : new Date().getTime()}, function (json) { createLis('ListLi2',json); } ); break; } } function createLis(obj,json){ switch(obj){ case "ListLi1": //根据车品牌名来刷选List1中的值 var executerp = document.getElementById(obj); //动态生成下拉列表框 executerp.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); }); executerp.appendChild(ul); break; case "ListLi2": //根据车厂商名来刷选List2中的值 var executerp = document.getElementById(obj); //动态生成下拉列表框 executerp.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); }); executerp.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.展示效果 
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
JQuery使用$.ajax和checkbox实现下次不在通知功能
Ajax中通过JS代码自动获取表单元素值
以上就是ajax实现输入框文字改变展示下拉列表的效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2747497.html
