Ajax搜索 · 前端開發

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" } ] ~~~