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"});
}
//模糊查询结束

参考:下拉框可实现select与input功能的简便做法

   bootstrap框架下下拉框select搜索功能

本文仅作为个人记录。

可供参考。

2017-11-1  08:36:00  修改

2017-11-13 08:36:19  上传

模糊查询基于select遍历json文件自动填充的实现的更多相关文章

  1. 使用maven根据JSON文件自动生成Java POJO类(Java Bean)源文件

    根据JSON文件自动生成Java POJO类(Java Bean)源文件 本文介绍使用程序jsonschema2pojo来自动生成Java的POJO类源文件,本文主要使用maven,其他构建工具请参考 ...

  2. 零基础学习java------36---------xml,MyBatis,入门程序,CURD练习(#{}和${}区别,模糊查询,添加本地约束文件) 全局配置文件中常用属性 动态Sql(掌握)

    一. xml  1. 文档的声明 2. 文档的约束,规定了当前文件中有的标签(属性),并且规定了标签层级关系 其叫html文档而言,语法要求更严格,标签成对出现(不是的话会报错) 3. 作用:数据格式 ...

  3. Vue之循环遍历Json数据,填充Table表格

    简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...

  4. npm install命令对package-lock.json文件自动做了一些额外的更新

    今天我使用 npm 命令给项目安装file-saver,通过git却发现package-lock.json中除了file-saver组件之外的其他组件的记录也被改了 npm为何会自动做这些更改呢,又如 ...

  5. scp传输文件,自动填充密码

    一个偷懒的小shell, #!/usr/bin/expect #******************************************************************** ...

  6. django ORM 增删改查 模糊查询 字段类型 及参数等

    ORM 相关 #sql中的表 #创建表: CREATE TABLE employee( id INT PRIMARY KEY auto_increment , name VARCHAR (), gen ...

  7. 五 查询数据SELECT   一、单表查询

    一 单表查询的语法 二 关键字的执行优先级 三 简单查询 四 WHERE约束 五 分组查询:GROUP BY 六 HAVING过滤 七 查询排序:ORDER BY 八 限制查询的记录数:LIMIT 九 ...

  8. MyBatis基础入门《六》Like模糊查询

    MyBatis基础入门<六>Like模糊查询 描述: 未改动的文件,不再粘贴出来.项目中SQL的xml映射文件重要标签如下: mapper namespace cache 配置给定命令空间 ...

  9. [ASP.NET]使用Oracle.ManagedDataAccess的OracleParameter参数化和OracleDataAdapter模糊查询

    今天写个查询员工的信息的demo遇到了2个问题 问题1.使用Oracle.ManagedDataAccess的OracleParameter参数化 OracleParameter 的使用(参数名要以: ...

随机推荐

  1. kotlin面向对象之接口、代理与委托、单例模式

    接口: 对于什么是接口这里就不概述了,跟java中的概念一样,下面直接上代码进行操练: 而男人跟女人的接口当然也是不同的,很显然男人跟女人最大的差别就是拥有"小弟弟"[我黄我暴利] ...

  2. Kruskal重构树+LCA || BZOJ 3732: Network

    题面:https://www.lydsy.com/JudgeOnline/problem.php?id=3732 题解:Kruskal重构树板子 代码: #include<cstdio> ...

  3. 4.3 jmu-Java-03面向对象-06-继承覆盖综合练习-Person、Student、Employee、Company (20 分)中的一些问题

    1.Employee类的equals 由于题目要求//首先调用父类的equals方法,如果返回true.再比较company与salary.//比较salary属性时,使用DecimalFormat ...

  4. js获取前几个月的具体日期

    // 往前数monthNum月份,不能往后数monthNum getPreMonthDay("2018-12-28",20) // 往前数monthNum月份,不能往后数month ...

  5. springboot jpa junit测试遇到的问题

    jpa在插入数据的时候,插入的对象变量user中不能包含变量,需要时确切的值,否则会出现sql解析报错 解析报错如下图

  6. Centos安装nmap端口查看工具

    CentOS安装nmap端口查看工具 一.安装nmap yum install nmap    #输入y安装 二.使用nmap      nmap localhost    #查看主机当前开放的端口  ...

  7. 【洛谷P3128】Max Flow

    题目大意:给定一棵 N 个节点的无根树,有 M 个操作,每次选定一条树链,将这条链上所有点的点权 +1,最后求树上点的最大点权是多少. 题解:树上差分算法的应用. 发现操作有 M 次,但是询问只有一次 ...

  8. MYSQL之数据库初识、安装详解、sql语句基本操作

    目录 MYSQL之数据库初识及安装详解 1.什么是数据库? 1.什么是数据?(data) 2.什么是数据库?(databases,简称DB) 2.为什要用数据库? 3.什么是数据库管理系统?(Data ...

  9. 直通BAT必考题系列:深入详解JVM内存模型与JVM参数详细配置

    VM基本是BAT面试必考的内容,今天我们先从JVM内存模型开启详解整个JVM系列,希望看完整个系列后,可以轻松通过BAT关于JVM的考核. BAT必考JVM系列专题 1.JVM内存模型 2.JVM垃圾 ...

  10. qq在线咨询

    <a href="http://wpa.qq.com/msgrd?v=3&uin=2395848377&site=qq&menu=yes"> & ...