码迷,mamicode.com
首页 > 编程语言 > 详细

利用java ajax以及js实现input框的模糊匹配下拉显示

时间:2019-08-19 19:15:15      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:toc   splay   html   屏蔽   LLC   width   模糊   浏览器   big   

前台jsp:

<input type="text" name="bigCategoryName" id="bigCategoryName" AutoComplete="off"
        	value="${bigCategoryName}" style="width:150px" maxlength="20" list="second"
        	oninput="firstSel()"/>

         <div style="display: none;">
         <datalist id="second" ></datalist></div>

  注意:AutoComplete="off"的作用是屏蔽掉浏览器本身的模糊匹配以前的输入记录,原来默认是on。

     oninput=""要用oninput事件监测输入框实时输入数据。

     <datalist>中的id与input标签中的list=“”绑定,用于显示ajax从后台获取的数据。

    <div>标签主要是为了将datelist包裹并设置 style="display: none"隐藏属性。

js代码:

function firstSel() {//如果第一个下拉列表的值改变则调用此方法
				var orderTypeName = $("#first").val();//得到第一个下拉列表的值
				 var url = "/XXX/xxx.do";
				if(orderTypeName!=null && "" != orderTypeName&& -1 != orderTypeName){
					//通过ajax传入后台,把orderTypeName数据传到后端
					$.post(url,{orderTypeName:orderTypeName},
					function(data){
					var res = JSON.parse(data);
					/* var res = $.parseJSON(data); *///把后台传回的json数据解析
					var option;
					$.each(res,function(i,n){//循环,i为下标从0开始,n为集合中对应的第i个对象
					option += "<option value=‘"+n.smallCategoryName+"‘>"+n.smallCategoryName+"</option>"
					});
					$("#second").html(option);//将循环拼接的字符串插入第二个下拉列表
					$("#second").show();//把第二个下拉列表展示
					});
				}
			

利用java ajax以及js实现input框的模糊匹配下拉显示

标签:toc   splay   html   屏蔽   LLC   width   模糊   浏览器   big   

原文地址:https://www.cnblogs.com/jk-jun/p/11378695.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!