Using an HTML search, need JavaScript to search an array and return results in new window

Question

This is a SCHOOL PROJECT and not something being used on a functioning website, so no worries that it's client side only! We've been asked to expand upon our last assignment to create a script that would allow out teacher to input an ARTIST name in the search box on our "music store" homepage, which would then search the JavaScript array that we built and then return the results in a new window with the "Album Name", as well as a link to another page for additional information (not so much worried about that link just yet, trying to get the actual search & album return functionality working first!).

Below is what I have, and the JS FIddle is: http://jsfiddle.net/2AS53/. Any assistance or ideas on what's wrong would be greatly appreciated. Thanks for your help...

<div class="form">
<form method="get" action="input">
    <input name="textfield" type="text" class="colortext" placeholder=" Search entire store..." />
</form>

Search

< script >

var myInventory = [{
    id: 001,
    title: "Total Life Forever",
    artist: "FOALS",
    price: 14.99,
    released: "March, 2009",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 002,
    title: "Bein Love",
    artist: "Locksley",
    price: 14.99,
    released: "April, 2012",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 003,
    title: "Privileged",
    artist: "Nick Moss",
    price: 14.99,
    released: "June, 2011",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 004,
    title: "Asondeguerra",
    artist: "Juan Louis Guerra",
    price: 14.99,
    released: "September, 2013",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 017,
    title: "Way Out Here",
    artist: "Josh Thompson",
    price: 14.99,
    released: "August, 2010",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 018,
    title: "Tremolo",
    artist: "The Pines",
    price: 14.99,
    released: "January, 2007",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 019,
    title: "Live From Freedom Hall",
    artist: "Lynyrd Skynyrd",
    price: 14.99,
    released: "June, 2010",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 020,
    title: "Achin & Shakin",
    artist: "Laura Bell Bundy",
    price: 14.99,
    released: "July, 2013",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 021,
    title: "Here I Am",
    artist: "Marvin Sapp",
    price: 14.99,
    released: "November, 2011",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 022,
    title: "Just James",
    artist: "J Moss",
    price: 14.99,
    released: "March, 2011",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, {
    id: 013,
    title: "Tom Petty - Live",
    artist: "Tom Petty",
    price: 14.99,
    released: "May, 2010",
    tracks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    quantity: 1
}, ];

search.onclick = myInventory() {
    var formInput = document.getElementById("formInput").value;

    for (i = 0; i < data.length; i++) {
        if (data[i] == formInput) {
            onclick = "java script: openWin('search.html') {"Album Name:"' title};
       } else {
            onclick = "java script: openWin('search.html') ("No Artists Found");
        }
    }
}; </script>

I'm looking… but first note- don't include the <script> tag in the javascript part of jsfiddle. That's what's causing all those extra characters. — Dan Goodspeed
– Dan Goodspeed, Commented Nov 23, 2013 at 7:32
When you say "search.onclick"… where do you define the "search" variable? — Dan Goodspeed
– Dan Goodspeed, Commented Nov 23, 2013 at 7:33
The array is the var being referenced, which is search.onclick = myInventory(), and the formInput is what it should be searching for... — JohnnyD65
– JohnnyD65, Commented Nov 23, 2013 at 7:36

bhovhannes · Accepted Answer · 2013-11-23 08:03:01Z

1

You had some typos, that's why I've created a working jsFiddle: http://jsfiddle.net/2AS53/3/

And here are main things, which prevent your code from working.

You don't have to add <script> tags in the JSFiddle script frame. Only pure JavaScript goes there. That;s why you have Uncaught SyntaxError: Unexpected token < in error console.
In myInventory() method you're referring to data variable, but you don't have such variable, you have variable var myInventory = [.... And this is another error. You define variable and then function with the same name. Second declaration will override first one.
JSFiddle web site places your JS code inside listener for window.load event, so, your data and onclick event handler are not defined in a global scope but in scope of window.load event listener. That's why there is a 'Uncaught ReferenceError: myInventory is not defined' error in error console. You can see yourself whan exactly jsfiddle produces, when right click in a result frame and choose 'View frame source'.
Since everything is inside window.load event handler, in order to attach event listener to search button, you should first get your button element (I've used document.getElementById) and then either do
```
document.getElementById('searchBtn').onclick = function() {
}
```

or

    document.getElementById('searchBtn').addEventListener('click', function() {
    });

Second way is more flexible, since it allows you to have multiple event listeners for a single event. I've added id="searchBtn" to search button in HTML.

edited Nov 23, 2013 at 8:03

answered Nov 23, 2013 at 7:51

bhovhannes

5,7052 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JohnnyD65 Over a year ago

Thanks @bhovhannes, I see where you got it to work for title, thank you much! I changed it to search by artist, but it's case sensitive so I'm gonna work on that further. Was the code I wrote to open to a new window incorrect, because we need it in a window rather than an alert? Thanks again for your help, and I understand the correction made by identifying the actual button that's being clicked in the event handler, I wasn't aware of that - this is all new to me, I appreciate all the help here on SO...

bhovhannes Over a year ago

@JohnnyD65 - in order to open a new window, you should use window.open(). Have a look on w3schools.com/jsref/met_win_open.asp, there is an example about how to write arbitrary html in the opened window. and... if your liked the answer, accept it/vote for it using checkmark/arrow at the left of the answer ;)

JohnnyD65 Over a year ago

thanks again for your help and information provided. I'm in better shape than I was an hour ago, and I'm heading back to W3Schools to read more on opening in a new window. Have a great night...

stanze · Accepted Answer · 2013-11-23 07:37:13Z

0

use onClick function in your HTML code and try

answered Nov 23, 2013 at 7:37

stanze

2,47814 silver badges14 bronze badges

1 Comment

JohnnyD65 Over a year ago

Did it work for you? I tried and it's still not functional, doesn't return anything. Though that could be 'cause I didn't include the search.html page, no?

Collectives™ on Stack Overflow

Using an HTML search, need JavaScript to search an array and return results in new window

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related