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

admin管理员组

文章数量:1302410

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 ing up with anything. There must be a way.

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 ing up with anything. There must be a way.

• javascript
• database

Share Follow asked Nov 28, 2012 at 17:15 Subjective EffectSubjective Effect 1,46522 gold badges1717 silver badges3737 bronze badges 5

• It's unclear what you're asking. Are you just trying to search a javascript array of houses given a search query in a text box? – Brad Koch Commented Nov 28, 2012 at 17:19
• Are you willing to use any frameworks or libraries to achieve this? That would make it a lot easier. – Aamir Commented Nov 28, 2012 at 17:22
• A search in a form <select> to be exact - a dropdown of 3,4,5 or 6 rooms. – Subjective Effect Commented Nov 28, 2012 at 17:22
• Right, so all you need to do is create an event to listen for a change of the select box, sort the array appropriately, and redisplay the results on the page. This is basic javascript, so it would help if you asked more specifically about what you don't understand about doing this. – Brad Koch Commented Nov 28, 2012 at 17:25
• I don't understand how to capture the roomsquery value on the the Results Page. Sorry for not being clear, I'm not a programmer by trade. – Subjective Effect Commented Nov 28, 2012 at 17:29

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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;
    }
}

Since you are working with a static list of houses entirely on the client side, you can acplish 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.

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.

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.

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/H9jkd/

本文标签：