Creating a small searchable database with JavaScript Object Arrays only. No AJAX, no PHP

Question

I want to create a small database, or collection, of items - only about 30 - you can search with JavaScript alone.

For example - let's say I have 20 houses to rent and I want students to be able to search for them houses with 4 or 5 rooms.

I can create the house objects like this:

function house(address, rooms, bathrooms){
this.address=address;
this.rooms=rooms;
this.bathrooms=bathrooms;
}

var property1 = new house("10 Park Way","4","1");
var property2 = new house("61 Park Avenue", "5","2");
var property3 = new house("585 Park Road", "3", "1");

I want to be able to search this list by "rooms" and display the address, number of rooms and number of bathrooms.

NB: I know the way I've written it isn't an Array but I will use an Array so I can use a for loop to cycle through the properties and evaluate them in the following way:

if(property[i].rooms == roomquery){
    document.write('Address:' + property[i].address + '.<p>');        
    document.write('Address:' + property[i].rooms + '.<p>');
    document.write('Address:' + property[i].bathrooms + '.<p>');
}

Simple eh?

Except I don't know how to pass the roomquery variable from my form to my script.

The order of the process is: Search Page -> Results Page -> Details Page

The user searches and gets a list of results. There is the option to view the property in more detail on the result page, passing the data from the results to page to be reformatted on a details page. Of course there will be much more data about each property in the Array and I can give this data to the id or value properties of invisible tags for collection and resubmission to a script on the details page.

I know I can do this with PHP, and I know I could do this by sending the roomquery variable to a script on the same page and making the changes on the Search Page.

But what I want to do is send the data, which is just a single number, to a script on the Results Page using GET, or any other method, because that way I can run the search from any page that will send to the Search Page.

I've searched the internet for this and I'm not coming up with anything. There must be a way.

Answer 1

Why don't you use JSON, here is an example:

var json = {
    "house": [{
            "address": "10 Park Way",
            "num1": 4,
            "num2": 1},
        {
            "address": "61 Park Avenue",
            "num1": 5,
            "num2": 2},
        {
            "address": "585 Park Road",
            "num1": 3,
            "num2": 1}]

};

var houses = json["house"];
for(var i=0; i < houses.length; ++i) {
    var houses_i = houses[i];
    if(houses_i["address"] == '10 Park Way') {
        alert('Found WAY!!!');
        break;
    }
}

Answer 2

Since you are working with a static list of houses entirely on the client side, you can accomplish this on a single page with a small amount of basic Javascript. No form submission required.

1. Set up your basic HTML form, with a place to display the results:

   <form>
       <select name="rooms"></select>
   </form>
   <div id="results"></div>
   

2. Write some javascript to listen for the change event (this example uses jQuery), do a search, and output the results:

   var houses = [/* ... */]
   $('select[name=rooms]').on('change', function () {
       var rooms = $('select[name=rooms]').val();
   
       $('#results').empty();
   
       for (var i = 0; i < houses.length; i++) {
           if (houses[i].rooms == rooms) {
               $('#results').append('<p>Address: ' + houses[i].address + '</p>');
           }
       }
   });
   

You can get a lot fancier and add more structure than this, but that should cover the basics.

If your heart is set on including a page submission, you can retrieve a parameter from the query string by parsing window.location.search. I think it's a better experience to keep it to one page though.

Answer 3

Not a full answer but have you considered using Web SQL? This allows you to do SQL queries on data that you've imported in JavaScript.

Answer 4

You can parse values out of a request querystring with a simple function such as the ones described here.

In order to create the querystring, you can have a form with a hidden input:

<form action="myresultspage.html" method="get">
    <input type="hidden" id="property" name="property" value="" />
    <input type="submit" />
</form>

Your JS can write to the hidden variable using something like document.getElementByid('property').value = newValue. On submitting this form, you'll be redirected to the URL myresultspage.html?property=newValue.

Answer 5

You just need to call your search function from an onchange event:

<script type="text/javascript">
function search(roomquery) {
// put your for loop here
}
</script>

rooms: <select onchange="search(this.options[selectedIndex].text);">
    <option>1</option>
    <option>2</option>
</select>​

see fiddle: http://jsfiddle.net/H9jkd/