I have done most of the live search code(in the javascript file below) but it is

ID: 3736404 • Letter: I

Question

I have done most of the live search code(in the javascript file below) but it is not working.
Please can you make the live search filter (menu search filter) work on the website, so when I type in the a word or letter of any of the menu's heading or any information, it will start appearing as like a drop down menu or list.(please do not add a table) Thanks
Menu1.json
{
"House Daily Soup" :
{
    "Description":"House made – served with artisan bread and farm butter – mostly (V) please ask",
    "Price":"£4.95"
},
"ANDY HOLT’S SATURDAY BLACK PUDDING" :
{
    "Description":"Bacon jam and soft poached egg",
    "Price":"£5.75"
},
"SATURDAY GRAVLAX" :
{
    "Description":"Cured with beetroot and sea salt – caper & lemon dressing",
    "Price":"£7.95"
},
"TEMPURA KING PRAWNS" :
{
    "Description":"Toasted corn chilli puree",
    "Price":"£7.95"
},
"RARE BREED BABY BACK RIBS" :
{
    "Description":"Basted in black treacle – cola & chilli",
    "Price":"£6.50"
}
}
Menu2.json
{
"Lamb duo" :
{
    "Description":"Pan-fried lamb rump and a Cheddar topped shepherd’s pie with seasonal vegetables and a red wine jus" ,
    "Price":"£4.95"
},
"Steak and mushroom pie " :
{
    "Description":"Slow cooked beef with a red wine sauce, topped with puff pastry, served with mash, seasonal vegetables and a jug of gravy",
    "Price":"£5.75"
},
"Roasted vegetable tart" :
{
    "Description":"Kale and thyme pastry filled with butternut squash, plum tomatoes, red onion, spinach and red peppers, with a leek sauce",
    "Price":"£7.95"
},
"Chicken and thyme pie" :
{
    "Description":"In a creamy chenin blanc sauce, topped with puff pastry, served with spring onion mash and seasonal vegetables",
    "Price":"£7.95"
},
"Yorkshire ham and free range eggs" :
{
    "Description":"with triple-cooked chips",
    "Price":"£6.50"
}
}
Menu3.json
{
"Fish and chips" :
{
    "Description":"beer-battered, line-caught cod with triple-cooked chips, mushy peas and tartare sauce",
    "Price":"£4.95"
},
"Seared fillet of sea bass " :
{
    "Description":"with crushed baby potatoes, asparagus and a lobster and samphire sauce",
    "Price":"£5.75"
},
"Pizza:Meat Feast" :
{
    "Description":"Chicken, pork and fennel sausage, crispy bacon, mozzarella and a red onion chutney",
    "Price":"£7.95"
},
"Pizza- roasted vegetable" :
{
    "Description":"red pepper, butternut squash, red onion, spinach and mozzarella(V)",
    "Price":"£7.95"
},
"Spicy diablo" :
{
    "Description":"Pepperoni, chorizo, guindilla chill peppers, ozarella and a chipotle chilli jam",
    "Price":"£6.50"
}
}

menuButton.html

<!DOCTYPE html>

<html>

<head>

<title>JavaScript AJAX</title>

</head>

<body>

<h1>Welcome to the Fab Pub Company (Est 2017)</h1>

<p id="description">Welcome to the Fab Pub Company. Check out our great menus by clicking on the buttons. Have an awesome day!</p>

<h2>Have a look at our menus...</h2>

<form>

<p>Click the button to get menu. </p>

</form>

</div>

<label for="search">Please search for a menu item</label>

</div>

<p>Visit our pubs and enjoy a convivial atmosphere, fine wines and food of a high quality as pictured in these royalty-free graphics</p>

<img src="Images/demo.jpg" id="mainImage" alt="Menus" width="350" height="315" class="articleImage"

</div>

function getDay() {

// created array weekdays to store days names

var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

var date = new Date(); // getting todays date with Date() object in JavaScript

var today = weekdays[date.getDay()]; // finding day that belongs to the date

alert("Today is :" + today); // alert() displaying days name to end user

}

function loadAJAX(jsonData) // defination for loadAJAX()

{

var request = new XMLHttpRequest();

request.open('GET', jsonData);

request.onreadystatechange = function () {

if ((request.readyState === 4) && (request.status === 200)) {

var menus = JSON.parse(request.responseText);

var output = " ";

for (var key in menus) {

output += "<li> <em>" + key + "</em>, " + menus[key]["Description"] + ", " + menus[key]["Price"] + " </li>";

}

var update = document.getElementById('menu');

update.innerHTML = output;

}

request.send();

}

var myImage = document.getElementById("mainImage");

var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",

"_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];

var imageIndex = 0;

function changeImage() {

myImage.setAttribute("src", imageArray[imageIndex]);

imageIndex++;

if (imageIndex >= imageArray.length) {

imageIndex = 0;

}

var intervalHandle = setInterval(changeImage, 1000);

myImage.onclick = function () {

clearInterval(intervalHandle);

};

$('#search').keyup(function() {

var searchField = $('#search').val();

var myExp = new RegExp(searchField, "i");

$.getJSON('data.json', function(data) {

var output = '<ul class="searchresults">';

$.each(data, function(key, val) {

if ((val.name.search(myExp) != -1) ||

(val.bio.search(myExp) != -1)) {

output += '<li>';

output += '<h2>'+ val.name +'</h2>';

output += '<img src="images/'+ val.shortname +'_tn.jpg" alt="'+ val.name +'" />';

output += '<p>'+ val.bio +'</p>';

output += '</li>';

}

});

output += '</ul>';

$('#update').html(output);

}); //get JSON

});

</script>

</body>

</html>

Explanation / Answer

As per question data.json not available...

In data.json must be contain with these format

{

name:"House Daily Soup",

bio: "House made – served with artisan bread and farm butter – mostly (V) please ask",

shortname:"house_dialy_soup"

}

and you are used JQuery for searching an menu item... it is not included

I was added searching with Menu.json instead of JSON as per given file. check once with my code...

Still if you need any help, give me comment...

<!DOCTYPE html>

<html>

<head>

<title>JavaScript AJAX</title>

</head>

<body>

<h1>Welcome to the Fab Pub Company (Est 2017)</h1>

<p id="description">Welcome to the Fab Pub Company. Check out our great menus by clicking on the buttons. Have an awesome day!</p>

<h2>Have a look at our menus...</h2>

<form>

<p>Click the button to get menu. </p>

<br/>

</form>

</div>

<label for="search">Please search for a menu item</label>

</div>

<p>Visit our pubs and enjoy a convivial atmosphere, fine wines and food of a high quality as pictured in these royalty-free

graphics

</p>

</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

function getDay() {

// created array weekdays to store days names

var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

var date = new Date(); // getting todays date with Date() object in JavaScript

var today = weekdays[date.getDay()]; // finding day that belongs to the date

alert("Today is :" + today); // alert() displaying days name to end user

}

function loadAJAX(jsonData) // defination for loadAJAX()

{

var request = new XMLHttpRequest();

request.open('GET', jsonData);

request.onreadystatechange = function () {

if ((request.readyState === 4) && (request.status === 200)) {

var menus = JSON.parse(request.responseText);

var output = " ";

for (var key in menus) {

output += "<li> <em>" + key + "</em>, " + menus[key]["Description"] + ", " + menus[key]["Price"] + " </li>";

}

var update = document.getElementById('menu');

update.innerHTML = output;

}

request.send();

}

var myImage = document.getElementById("mainImage");

var imageArray = ["_images/overlook.jpg", "_images/winery_sign.jpg", "_images/lunch.jpg",

"_images/bigSur.jpg", "_images/flag_photo.jpg", "_images/mission_look.jpg"];

var imageIndex = 0;

function changeImage() {

myImage.setAttribute("src", imageArray[imageIndex]);

imageIndex++;

if (imageIndex >= imageArray.length) {

imageIndex = 0;

}

var intervalHandle = setInterval(changeImage, 1000);

myImage.onclick = function () {

clearInterval(intervalHandle);

};

$('#search').keyup(function () {

var searchField = $('#search').val();

var myExp = new RegExp(searchField, "i");

$.getJSON('Menu.json', function (data) {

var output = '<ul class="searchresults">';

$.each(data, function (key, val) {

if ((key.search(myExp) != -1) ||

(val.Description.search(myExp) != -1)) {

output += '<li>';

output += '<h2>' + key + '</h2>';

output += '<img src="images/' + val.shortname + '_tn.jpg" alt="' + key + '" />';

output += '<p>' + val.Description + '</p>';

output += '</li>';

}

});

output += '</ul>';

$('#update').html(output);

}); //get JSON

});

</script>

</body>

</html>

Navigate

I have done most of the code I just need help inputting a loop and creating a fl

I have done my homework. Can someone help me by double checking my answers to fi

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

I have done most of the live search code(in the javascript file below) but it is

Question

Explanation / Answer

Related Questions

Navigate