文档章节

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

o
 osc_g8254g7s
发布于 2019/08/19 18:05
字数 309
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

前台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();//把第二个下拉列表展示
					});
				}
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

OSChina 周一乱弹 —— 毛巾又怎么样?!我在乎的是大姐姐温柔的怀抱!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《雨 因你而下,于你而止》- Seto 手机党少年们想听歌,请使劲儿戳(这里) @Dan...

小小编辑
11分钟前
27
0
MySQL 常用操作

1 创建/打开/删除数据库 create database db;create database db character set utf8mb4;use db;drop database db;alter database db character set utf8mb4; 2 修复表 mysqlcheck --a......

氷泠
15分钟前
0
0
Node.js中的module.exports与export - module.exports vs exports in Node.js

问题: I've found the following contract in a Node.js module: 我在Node.js模块中找到了以下合同: module.exports = exports = nano = function database_module(cfg) {...} I wonder ......

javail
21分钟前
13
0
如何防止单击按钮时对话框关闭 - How to prevent a dialog from closing when a button is clicked

问题: I have a dialog with EditText for input. 我有一个使用EditText输入的对话框。 When I click the "yes" button on dialog, it will validate the input and then close the dialog.......

富含淀粉
51分钟前
17
0
访问者模式Visitor

一 概述 场景:通常来说,用于封装数据所用到的pojo类,其只包含get、set,对应的业务逻辑是在Service上完成的;但如果出现多个pojo类都共用一套逻辑时,则应该考虑将逻辑进行抽象,不同类型...

小明不觉小
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部