index.html
```
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Search HTML Table Data by using JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#result {
position: absolute;
width: 100%;
max-width:870px;
cursor: pointer;
overflow-y: auto;
max-height: 400px;
box-sizing: border-box;
z-index: 1001;
}
.link-class:hover{
background-color:#f1f1f1;
}
</style>
</head>
<body>
<br /><br />
<div class="container" style="width:900px;">
<h2 align="center">JSON Live Data Search using Ajax JQuery</h2>
<h3 align="center">Employee Data</h3>
<br /><br />
<div align="center">
<input type="text" name="search" id="search" placeholder="Search Employee Details" class="form-control" />
</div>
<ul class="list-group" id="result"></ul>
<br />
</div>
<script>
$(document).ready(function(){
$.ajaxSetup({ cache: false });
$('#search').keyup(function(){
$('#result').html('');
$('#state').val('');
var searchField = $('#search').val();
var expression = new RegExp(searchField, "i");
$.getJSON('data.json', function(data) {
$.each(data, function(key, value){
if (value.name.search(expression) != -1 || value.location.search(expression) != -1)
{
$('#result').append('<li class="list-group-item link-class"><img src="'+value.image+'" height="40" width="40" class="img-thumbnail" /> '+value.name+' | <span class="text-muted">'+value.location+'</span></li>');
}
});
});
});
$('#result').on('click', 'li', function() {
var click_text = $(this).text().split('|');
$('#search').val($.trim(click_text[0]));
$("#result").html('');
});
});
</script>
</body>
</html>
```
data.json
~~~json
[
{
"name":"Angel Lewis",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/0d4/2f7/07a3d35.jpg",
"location":"Seattle, WA"
},
{
"name":"Justin Dean",
"image": "https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAAIMAAAAJGExNTE4OWY4LWU4ODMtNDA2ZS1iNWI1LWNkYmIyOWMyMGQ5Zg.jpg",
"location":"Muscatine, IA"
},
{
"name":"Nora Blake",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/005/0b8/118/387e091.jpg",
"location":"Seattle, WA"
},
{
"name":"Russell Fox",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/000/084/26e/2d9e05b.jpg",
"location":"Albuquerque, NM"
},
{
"name":"Daryl Bradley",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/042/0ad/197566e.jpg",
"location":"Buckeystown, MD"
},
{
"name":"Benjamin Gonzales",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/8/005/0b2/1c9/2a423c1.jpg",
"location":"Atlanta, GA"
},
{
"name":"Viola Francis",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAASJAAAAJGMyMTUzN2EyLTExY2ItNDZiNS1hMTY1LTI4NDA2NDMwZmFkNg.jpg",
"location":"Zanesville, OH"
},
{
"name":"Reginald Benson",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/1/000/10f/3cc/275a407.jpg",
"location":"Gilbert, AZ"
},
{
"name":"Glenda Ray",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/8/005/0ac/1ca/07c25a2.jpg",
"location":"Baltimore, MD"
},
{
"name":"Paula Vargas",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/03e/073/36a5c47.jpg",
"location":"Baltimore, MD"
},
{
"name":"Mark Armstrong",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/5/005/010/09b/39b122d.jpg",
"location":"Hallandale Beach, FL"
},
{
"name":"Jaime Campbell",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAATUAAAAJDJkY2Q1Mzk0LTI1YzItNDFhNy04ZmQ0LWY3NzZlZTZlNGVmYw.jpg",
"location":"Zanesville, OH"
},
{
"name":"Mike Beck",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/2/000/01c/0d4/2b69e7c.jpg",
"location":"Garner, NC"
},
{
"name":"Ann Lowe",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/000/1f6/019/29cd853.jpg",
"location":"Cabin John, MD"
},
{
"name":"Ryan Wolfe",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/1/000/0bf/335/05a57f6.jpg",
"location":"Los Angeles, CA"
},
{
"name":"Dwayne Gutierrez",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/3/000/29b/028/2426536.jpg",
"location":"San Jose, CA"
},
{
"name":"Bill Burke",
"image": "https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/000/1bc/12e/1423106.jpg",
"location":"Bakersfield, CA"
}
]
~~~
- 前端开发概要
- Vue
- Vue.js
- Vue的模板
- Vue的属性绑定和双向数据绑定
- Vue的计算属性和侦听器
- v-show和v-if
- Vue简单to do list
- Vue简单to do list组件拆分
- Vue简单to do list组件和实例
- Vue简单to do list的删除功能
- Vue的点击事件，侧重操作数据
- vue中定时器设置和关闭页面时关闭定时器
- axios
- Vue Element-ui
- HTML转Vue
- Vue3
- Vue开发简易权限认证
- demo
- Vue常用命令
- Vue项目1
- 前端面试
- 算法题
- Vue框架原理
- 前端基础
- 安全
- 模拟面试一面
- JavaScript和MySQL
- JavaScript和Redis
- HTML+CSS入门到案例
- 无限级导航栏案例开发
- iframe嵌套网页全屏显示
- CSS定位显示图片不同部分
- Select option 跳转
- 网页显示JavaScript
- 简单文本编辑器
- 用纯js实现一个文本编辑器
- 视频，音频
- frame包住目标网站
- Web重定向
- HCJ
- HTML
- CSS
- jQuery
- Bootstrap
- CSS实例
- 【CSS3】8款好看的纯CSS3搜索框
- 小工具
- menu_icon
- JavaScript
- JS获取屏幕尺寸
- JavaScript简易录播图
- 预设select option的值
- HTML和CSS基础
- APP开发
- uni-app
- nw.js
- CSS基础
- CSS hover 菜单
- CSS Menu
- CSS Menu 2
- Bootsrtap
- 图片展示
- 固定topbar
- JavaScript
- 当前页select option value跳转页面
- JavaScript点击一级菜单打开和关闭二级菜单
- JavaScript json无限分级导航菜单
- JavaScript獲取url
- 其他
- JS获取复选框中当前选中的值
- JS array 遍歷
- JavaScript無刷新修改url
- localStorage
- js版的in_array的实现方法
- JavaScript修改URL參數
- JSON
- jQuery教程
- 用PHP+MySQL+jQuery+Ajax拖放排序修改数据库
- jQuery实例
- jQuery
- jQuery实例1
- jQuery slider实例
- jQuery加载更多功能
- jQuery前后元素移动
- datatables前端搜索功能
- jQuery select value跳转页面
- jQuery局部刷新
- jQuery点击自身以外关闭弹出窗
- 点击增加class
- 点击增加和删除class
- 固定向右menu
- jQuery多級menu
- 用Jquery和Json实现多语言切换
- jQuery to do list
- jQuery slideToggle
- jQuery点击显示和隐藏CSS
- js如何获取点击标签里的值
- JavaScript和JQuery获取DIV的值
- jQuery加载公用文件
- createElement添加内容
- createElement添加内容 - 复制案例
- jQuery 遍历案例
- HBuilder
- 案例
- Slider
- html5 video
- Ajax
- Ajax案例1： 无优化XMLHttpRequest
- Ajax案例2： json的XMLHttpRequest
- Ajax案例3： jQuery json的XMLHttpRequest
- Ajax案例4： H5 jQuery的XMLHttpRequest
- Ajax案例5：无跳转刷新容器获取外部内容
- Ajax搜索
- 两种Ajax获取数据方式
- Cookie
- 微信小程序
- 基础的GET和POST页面
- Node.js
- AngularJS
- AngularJS案例
- AngularJS案例1
- ReactJS
- React native
- API
- Postman API
- Web前端常用图标
- Photoshop
- 前端cnd
- 前端工具
- 前端模板
- Export data
- 前端工程化
- 固定菜單
- 404頁面
- test
- JavaScript框架
- 瀏覽器兼容性