It is a simple autocomplete program. The value entered in the textbox is read. We can see it while debugging but the GetJson() property fails to fetch the JSON file.
Thus the program fails to execute.
My code is as follows
JavaScript code
The getJson prop fails to fetch the file. Screenshot attached to the question
The HTML, CSS, and JavaScript are in a single file. Its named Search_Web.html
<script>
$(document).ready(function() {
$("#search").keyup(function() {
$("#result").html("");
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><img src = "" ' +
value.image +
' height="40" width="40" class="img-thumbnail" /> ' +
value.name +
' |<span class= "text-muted"> ' +
value.location +
'</span></li>"'
);
}
});
});
});
});
</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><!DOCTYPE html>
<html>
<head>
<title>Search Operation</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="#" />
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"
></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"
></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
</head>
<body>
<br />
<br />
<div class="container" style="width:900px;">
<h2 align="center">JSON Live Data Search using AJAX and Jquery</h2>
<h3 align="center">Player Data</h3>
<br />
<br />
<div>
<input type="text" name="search" id="search" placeholder="Search Player Details" class="form-control" />
</div>
<ul class="list-group" id="result"></ul>
</div>
</body>
</html>JSON file data.json
Browser Console I have attached a screenshot of where I think the errors occur. I have seared all the answers regarding this question in a stack overflow. None have helped me. I hope I will be able to solve this. I am still learning. Please forgive ant silly mistakes. Any help is deeply appreciated.
[
{
"name": "Joe Augus",
"image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\joe.jpg",
"location": "Kochi,India"
},
{
"name": "Ronaldo",
"image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\ronaldo.jpg",
"location": "Turin,Spain"
},
{
"name": "Messi",
"image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\messi.jpg",
"location": "Barcelona,Spain"
},
{
"name": "Pogba",
"image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\pogba.jpg",
"location": "Manchester,UK"
},
{
"name": "Rashford",
"image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\rashford.jpg",
"location": "Manchester,UK"
},
{
"name": "Kroos",
"image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\kroos.jpg",
"location": "Madrid,Spain"
},
{
"name": "Modric",
"image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\modric.jpg",
"location": "Madrid,Spain"
},
{
"name": "Mbappe",
"image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\mbappe.jpg",
"location": "Paris,France"
},
{
"name": "Neymar",
"image": "C:\Users\BizFirst\Documents\Visual Studio 2015\Projects\First_Search\First_Search\Pics\neymar.jpg",
"location": "Paris,France"
}
]
