模糊查询基于select遍历json文件自动填充的实现
HTML页面
<tr>
<td align="left"><span>案由</span>
<input type="text"
name="ay"
id="ay"
value=""
placeholder="输入内容之后,回车键可进行模糊检索!"
onclick="showAy()"
onkeypress="checkEnter(event,this);"
style="width:340px;height:26px;position: relative;top:2px;left:-1px;"
/>
<select id="selectAy"
style="width:340px;height:26px; overflow:hidden;position:relative;top:-8px;left:92px;display:none;"
onchange="changeAy()"
onblur="outfocus(this)">
</select>
</td>
</tr>
js文件
//模糊查询-----选择方法
function checkAyValue(){
var ay = document.getElementById("ay").value;
if(ay!="" && ay!= null){
selectAy(ay);
}else{
showAy();
}
}
//模糊查询开始
function selectAy(ay){
$("#selectAy").css({"display":"none"});
var jsonfile = "minshi.json";
if(ajtype.indexOf("民事")!=-1){jsonfile = "minshi.json";}
else if(ajtype.indexOf("刑事")!=-1){jsonfile = "xingshi.json";}
else if(ajtype.indexOf("行政")!=-1){jsonfile = "xingzheng.json";}
else if(ajtype.indexOf("赔偿")!=-1){jsonfile = "peichang.json";}
else if(ajtype.indexOf("执行")!=-1){jsonfile = "zhixing.json";} var ayName="";
$.ajax({
url: appPath + "clientpage/json/ay/" + jsonfile,//json文件位置
type: "GET",//请求方式为get
dataType: "json", //返回数据格式为json
success: function(data) {//请求成功完成后要执行的方法
//除第一次外,清空select中的option选项
$("#selectAy").empty();
//遍历json数组
$.each(data, function(i, item) {
var s = item.id.indexOf(ay);
if (s !=-1) {
ayName=item.name;
$("#selectAy").append("<option value=\"" + ayName + "\" >" + ayName + "</option>");
}
});
if(ayName==null || ayName == ""){
afterSelectAy();
document.getElementById("ay").value=null;
}else{
changeAy();
}
}
});
}
function changeAy(){
document.getElementById("ay").value=
document.getElementById("selectAy").options[document.getElementById("selectAy").selectedIndex].value;
}
NS4 = (document.layers) ? true : false;
function checkEnter(event,element){
var code = 0;
if (NS4) code = event.which;
else code = event.keyCode;
if (code==13){
$("#ayContent").css({"display":"none"});
checkAyValue();
$("#selectAy").css({"display":""});
$("#selectAy").css({"background-color":"#F2F8FD"});
}
}
function afterSelectAy(){
layer.msg('没有符合您输入要求的检索结果,请重新输入进行检索!');
}
function outfocus(){
$("#selectAy").css({"display":"none"});
}
//模糊查询结束
本文仅作为个人记录。
可供参考。
2017-11-1 08:36:00 修改
2017-11-13 08:36:19 上传
模糊查询基于select遍历json文件自动填充的实现的更多相关文章
- 使用maven根据JSON文件自动生成Java POJO类(Java Bean)源文件
根据JSON文件自动生成Java POJO类(Java Bean)源文件 本文介绍使用程序jsonschema2pojo来自动生成Java的POJO类源文件,本文主要使用maven,其他构建工具请参考 ...
- 零基础学习java------36---------xml,MyBatis,入门程序,CURD练习(#{}和${}区别,模糊查询,添加本地约束文件) 全局配置文件中常用属性 动态Sql(掌握)
一. xml 1. 文档的声明 2. 文档的约束,规定了当前文件中有的标签(属性),并且规定了标签层级关系 其叫html文档而言,语法要求更严格,标签成对出现(不是的话会报错) 3. 作用:数据格式 ...
- Vue之循环遍历Json数据,填充Table表格
简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...
- npm install命令对package-lock.json文件自动做了一些额外的更新
今天我使用 npm 命令给项目安装file-saver,通过git却发现package-lock.json中除了file-saver组件之外的其他组件的记录也被改了 npm为何会自动做这些更改呢,又如 ...
- scp传输文件,自动填充密码
一个偷懒的小shell, #!/usr/bin/expect #******************************************************************** ...
- django ORM 增删改查 模糊查询 字段类型 及参数等
ORM 相关 #sql中的表 #创建表: CREATE TABLE employee( id INT PRIMARY KEY auto_increment , name VARCHAR (), gen ...
- 五 查询数据SELECT 一、单表查询
一 单表查询的语法 二 关键字的执行优先级 三 简单查询 四 WHERE约束 五 分组查询:GROUP BY 六 HAVING过滤 七 查询排序:ORDER BY 八 限制查询的记录数:LIMIT 九 ...
- MyBatis基础入门《六》Like模糊查询
MyBatis基础入门<六>Like模糊查询 描述: 未改动的文件,不再粘贴出来.项目中SQL的xml映射文件重要标签如下: mapper namespace cache 配置给定命令空间 ...
- [ASP.NET]使用Oracle.ManagedDataAccess的OracleParameter参数化和OracleDataAdapter模糊查询
今天写个查询员工的信息的demo遇到了2个问题 问题1.使用Oracle.ManagedDataAccess的OracleParameter参数化 OracleParameter 的使用(参数名要以: ...
随机推荐
- HTTP缓存剖析
web浏览器会自动缓存访问过的页面,当访问同一个页面的请求时,浏览器不再从服务器中重新下载页面而是优先使用本地缓存中的页面 为什么要进行web缓存 从用户的角度来看web缓存加快了上网速度,当然这是用 ...
- JAVA笔记5-package和import
1.基本介绍 为便于管理大型软件系统中数目众多的类,解决类的命名冲突问题,Java引入包(package)机制,提供类的多重类命名空间.在实际项目开发中任何类都应该定义在包中. (1)package语 ...
- centos 修改时区以及修正时间
1.查看系统当前的时区 [app@127-0-0-1 shine]$ timedatectl Local time: Wed 2019-10-23 17:56:17 CST Universal tim ...
- Windows:在特定路径下启动命令行
造冰箱的大熊猫,本文适用于Windows 7@cnblogs 2018/11/30 在Windows文件浏览器中,按下“Shift+鼠标右键”,点击“在此处打开命令窗口”.
- Codeforces 482E ELCA (LCT)
题目链接 http://codeforces.com/contest/482/problem/E 题解 T2智商题T3大LCT题,我一个也不会= = CF的标算好像是分块?反正现在LCT都普及了就用L ...
- A. Be Positive
A. Be Positive time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- Ubuntu18.04安装rabbitvcs svn图形化客户端和简单实用
1.1 自带source源里面查找rabbitvcs信息 sudo apt search rabbitvcs 1.2 安装rabbitvcs sudo apt install rabbitvcs- ...
- python学习之路(10)--难点
递归函数 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 举个例子,我们来计算阶乘n! = 1 x 2 x 3 x ... x n,用函数fact(n)表示,可以 ...
- 【python】windows更改jupyter notebook(ipython)的默认打开工作路径
写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...
- vue.js环境安装
1.到官网(http://nodejs.cn/download/)下载Node.JS运行环境并安装(由于现在的Node中自带npm包管理器,所以就不需要额外下载npm了) 2.如果是新手,那么建议以引 ...