Menu and Search using data in an External File

Will this work?  I added a couple of functions to populate the options in the select and to filter the table.  I also modified the external properties.js file (there's no need for the extra "|" at the end of each data item) and the createTable() function to simplify the script, it's actually a bit more efficient now.  Hope it helps.

/ *properties.js */
var data = new Array();

data[0] = "Chester Square | Belgravia | £3,450,000 |  Freehold | An opportunity to acquire this magnificent and superbly refurbished family house built circa 1840 and situated at the eastern end of this prestigious Belgravia garden square, set in one of London's premier locations. The accommodation comprises entrance hall, dining room, reception room, kitchen/breakfast room, six bedrooms, family room, study/library, study, utility room, en-suite shower room, two en suite bath/shower rooms, bathroom, cloakroom, conservatory, roof terrace and balcony. ";
 
data[1] = "Audley Square | Mayfair | £5,750,000 | Freehold | An impressive ambassadorial Grade II listed 18th century freehold residence with private garden and garaging located in the heart of Mayfair with views over Tilney Street towards Hyde Park. The property is conveniently located close to the comprehensive shopping and transport facilities that Mayfair has to offer. ";
 
data[2] = "Hereford House, North Road | Mayfair | £2,150,000 | Leasehold | A recently refurbished fourth floor (with lift) of a portered building off Park Lane, this impressive three bedroom apartment offers vast living space. The property comprises a 24ft reception room with natural stone fireplace, spacious dining room, stylish kitchen, sumptuous master suite and two further bedrooms both with en suite bathrooms. ";

data[3] = "Eaton Place | Belgravia | £1,985,000 | Leasehold | An elegant and immaculate three bedroom maisonette set on the third and fourth floors of this imposing period building. The property has recently been refurbished to a very high standard and comprises entrance hall, L-shaped drawing/dining room, kitchen, master bedroom, dressing room, two further bedrooms, cloakroom, two en-suite bathrooms, shower room and direct lift access. Ideally situated in this prestigious Belgravia address, the property is within easy access of a wide array of shopping, transport and entertainment facilities. ";

data[4] = "Yeomans Row | Knightsbridge | £1,750,000 | Freehold | A rare opportunity to acquire a four bedroom freehold terraced house situated in this quiet cul-de-sac off the Brompton Road in the heart of Knightsbridge. The property comprises entrance hall, dining room, eat-in-kitchen, L-shaped drawing room, four bedrooms, bathroom, cloakroom, patio garden, utility and storage in basement. ";
 
data[5] = "Warriner Gardens | Battersea | £265,000 | Share Freehold | A charming one bedroom garden flat in this fantastic location just moments from Battersea Park. The well appointed accommodation comprises reception room with bay window and stripped wood floors, double bedroom with fitted cupboards, large kitchen / diner with bay window to side, bathroom and lovely private paved garden to the rear. Warriner Gardens runs along side Prince Of Wales Drive and is within walking distance to both Battersea Park and Queenstown Road train stations and all the local amenities on Battersea Park Road. No onward chain. ";
 
data[6] = "Brompton Road | Knightsbridge | £875,000 | Leasehold | A bright and spacious apartment set on the fifth floor of this popular portered block. The property has been recently decorated and comprises entrance hall, reception room, dining hall, four bedrooms, en-suite bathroom, en-suite shower room, cloakroom, kitchen, lift and porter. Ideally situated in this prestigious address it is within easy access to the wide range of amenities of Knightsbridge. ";
 
data[7] = "Thurloe Place | Knightsbridge | £735,000 | Leasehold | A wonderfully bright and spacious second floor flat situated in this mansion block. The flat benefits from porterage and access (by separate negotiation) to the roof terrace and Thurloe Gardens. The flat comprises of two bedrooms and a study, en-suite shower room, bathroom, eat-in kitchen, utility room and large reception room. ";

data[8] = "Cale Street | Chelsea | £2,000,000 | Freehold | A rare opportunity to acquire a magnificent five bedroom period house located in this popular Chelsea Green Village, benefiting from a garden and swimming pool. The property is in good condition and comprises reception room, dining room, kitchen, five bedrooms, three en suite shower rooms, two en suite bathrooms, garden, terrace, heated swimming pool and spa. Ideally situated in this prestigious address, it is within easy access to the wide range of amenities available in Chelsea. ";
 
data[9] = "North Audley Street | Mayfair | £2,200,000 | Leasehold | A grand second floor family apartment with high ceilings and views towards Grosvenor Square. The apartment has been modernised over recent years and is beautifully presented. ";
 
data[10] = "Cheyne Walk | Chelsea | £999,000 | Share Freehold | A bright and spacious fourth floor three bedroom apartment set in this prestigious portered block. The property is offered in good condition throughout and comprises entrance hall, reception room, dining area, open plan kitchen, master bedroom with en-suite bathroom, two further bedrooms and a shower room. Further benefits include lift, 24 hour porterage, underground parking space and access to communal gardens. Ideally situated within easy access to the wide range of amenities available in Chelsea with the added bonus of amazing river views. ";
 
data[11] = "Warriner Gardens | Battersea | £275,000 | Leasehold | A bright well presented top floor two bedroom flat in this popular road running parallel behind Battersea Park. This split level property comprises reception room with bay window, kitchen / breakfast room, master bedroom with fitted cupboards, bedroom, bathroom and access to large loft space. Warriner Gardens runs parallel to Prince Of Wales Drive and is conveniently located for access to the open spaces of Battersea Park. Transport is provided by way of Battersea Park station and Queenstown Road. ";

/* the page */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<title>Properties For Sale</title>
<script type="text/javascript" src="properties.js"></script>
<script type="text/javascript">
// Create a Table from a JavaScript Array script by lil_Puffball at https://www.experts-exchange.com //

var opts = new Array();
for(i=0, n=data.length; i < n; i++)
{
  // first get parts of array
  var parts = data[i].split(" | ");

  // create new entry for data[i]
  var temp = new Array();
  temp[0] = "<b>" + parts[0] + ", " + parts[1] + "</b>";
  temp[1] = parts[2] + " - " + parts[3];
  temp[2] = parts[4];
  temp[3] = "<hr>";

  // store temp back into data
  data[i] = temp;

  // store unique options for drop down
  opts[parts[1]] = 1;
}

function createTable(arr) {
  var numcols=1;
  var numrows=arr[0].length, trow, tcell;
  tbl=document.getElementById("container").firstChild;

  // first clear all rows (if any present)
  for (var i = 0, n = tbl.rows.length; i < n; i ++)
    tbl.removeChild(tbl.rows[0]);

  // now re-build table
  for(var n=0;n<arr.length;n+=numcols){
    for(var i=0;i<numrows;i++){
      trow=document.createElement("tr");
      for(var j=0;j<numcols;j++){
        tcell=document.createElement("td");
        if(!arr[n+j]){tcell.innerHTML="";}
        else{tcell.innerHTML=arr[n+j][i];}
        trow.appendChild(tcell);
      }
      tbl.appendChild(trow);
    }
  }
}

function createOptions()
{
  var sel = document.getElementById("theSel");
  sel.options[0] = new Option("Please Select a Location", ",");
  for (var i in opts)
    sel.options[sel.options.length] = new Option(i, i);
  sel.onchange = filter;
}

function filter()
{
  var key = this.options[this.options.selectedIndex].value;
  var includeArr = new Array();
  for (var i = 0, n = data.length; i < n; i ++)
  {
    var location = data[i][0];
    if (location.indexOf(key) > -1)
      includeArr[includeArr.length] = data[i];
  }
  createTable(includeArr);
}
</script>

</head>

<body onload="createTable(data); createOptions();">

<select id="theSel"></select>

<table id="container" align="center" cellspacing="0" cellpadding="0" border="0" width="400"><tbody></tbody></table>

</body>
</html>

Hi dakyd

This works perfectly.

Just a few of questions if I may. As I would prefer not to use an option menu if possible (I know, I just being awkward):

1) Is it possible to put the menu in alphabetic order?

2) Can the menu be a list of links so that html and style sheets can be used to format the look?
ie: <a href='...' class='classname'>menu item 1</a>
     <a href='...' class='classname'>menu item 2</a>
     <a href='...' class='classname'>menu item 3</a>
     ...
     ...

3) if question 2 is possible, can they be placed inside another table for easier formatting, so as to have the menu and selections side-by-side?

Kind regards

Pantyboy

Sorry I didn't notice your post earlier, but give the script below a shot.
1) Yes, you can alphabetize the links in the menu.  I remember reading that in your question, but somehow I forgot, sorry about that.
2 and 3) I created the links, you'll notice that the section that createOptions() now creates rows and cells that populate the table with id "myOpts".  To be honest, though, you can probably create nicer formatting without the tables and some CSS instead.  Regardless, I think that should cover it, let me know if you still have any questions.  Hope that helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<title>Properties For Sale</title>
<style type="text/css">
#myOpts {
  float: left;
  width: 150px;
}
</style>
<script type="text/javascript" src="properties.js"></script>
<script type="text/javascript">
// Create a Table from a JavaScript Array script by lil_Puffball at https://www.experts-exchange.com //

var opts = new Array();
for(i=0, n=data.length; i < n; i++)
{
  // first get parts of array
  var parts = data[i].split(" | ");

  // create new entry for data[i]
  var temp = new Array();
  temp[0] = "<b>" + parts[0] + ", " + parts[1] + "</b>";
  temp[1] = parts[2] + " - " + parts[3];
  temp[2] = parts[4];
  temp[3] = "<hr>";

  // store temp back into data
  data[i] = temp;

  // store unique options for drop down
  opts[parts[1]] = 1;
}

function createTable(arr) {
  var numcols=1;
  var numrows=arr[0].length, trow, tcell;
  tbl=document.getElementById("container").firstChild;

  // first clear all rows (if any present)
  for (var i = 0, n = tbl.rows.length; i < n; i ++)
    tbl.removeChild(tbl.rows[0]);

  // now re-build table
  for(var n=0;n<arr.length;n+=numcols){
    for(var i=0;i<numrows;i++){
      trow=document.createElement("tr");
      for(var j=0;j<numcols;j++){
        tcell=document.createElement("td");
        if(!arr[n+j]){tcell.innerHTML="";}
        else{tcell.innerHTML=arr[n+j][i];}
        trow.appendChild(tcell);
      }
      tbl.appendChild(trow);
    }
  }
}

function createOptions()
{
  var obj = document.getElementById("myOpts").getElementsByTagName("tbody")[0];

  var temp = new Array();
  for (var i in opts)
    temp[temp.length] = i;
  temp.sort();

  for (var i = 0, n = temp.length; i < n; i++)
  {
    var myRow = document.createElement("tr");
    var myCell = document.createElement("td");

    var myAnchor = document.createElement("a");
    myAnchor.href = "#";
    myAnchor.className = "theClassName";
    myAnchor.innerHTML = temp[i];
    myAnchor.onclick = filter;
    myCell.appendChild(myAnchor);
    myRow.appendChild(myCell);
    obj.appendChild(myRow);
  }
}

function filter()
{
  var key = this.innerHTML;
  var includeArr = new Array();
  for (var i = 0, n = data.length; i < n; i ++)
  {
    var location = data[i][0];
    if (location.indexOf(key) > -1)
      includeArr[includeArr.length] = data[i];
  }
  createTable(includeArr);
}
</script>

</head>

<body onload="createTable(data); createOptions();">

<table id="myOpts"><tbody>
  <tr>
    <td><a href="#" onclick="createTable(data)">ALL</a></td>
  </tr>
</tbody></table>

<table id="container" align="center" cellspacing="0" cellpadding="0" border="0" width="400"><tbody></tbody></table>

</body>
</html>

Hello again dakyd

Many, many thanks for the changes. This is exactly what I'm looking for.

I'm afraid I've got another couple of questions for you though, if you wouldn't mind.

In the menu, you have created a link 'All' to show the whole list. Is there some way for that link to appear as the last item on the menu?

Also, after the user has clicked a menu link and gets the 'filtered' list, if I wanted to sort the list by, for example, the price (highest first or lowest first, whichever is my choice, not the users), could that be done, and if so, how?

Sorry to throw in another couple of questions, even though you have answered my question, but these came up as I saw the results.

Many many, thanks once again

Pantyboy

Give this a shot, think it's what you're looking for.  Hope that helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<title>Properties For Sale</title>
<style type="text/css">
#myOpts {
  float: left;
  width: 150px;
}

#firstSortLink {
  float: left;
}

#secondSortLink {
  float: right;
}
</style>
<script type="text/javascript" src="properties.js"></script>
<script type="text/javascript">
// Create a Table from a JavaScript Array script by lil_Puffball at https://www.experts-exchange.com //

var opts = new Array();
for(i=0, n=data.length; i < n; i++)
{
  // first get parts of array
  var parts = data[i].split(" | ");

  // create new entry for data[i]
  var temp = new Array();
  temp[0] = "<b>" + parts[0] + ", " + parts[1] + "</b>";
  temp[1] = parts[2] + " - " + parts[3];
  temp[2] = parts[4];
  temp[3] = "<hr>";

  // store temp back into data
  data[i] = temp;

  // store unique options for drop down
  opts[parts[1]] = 1;
}

function createTable(arr, sortType) {
  var numcols=1;
  var numrows=arr[0].length, trow, tcell;
  tbl=document.getElementById("container").firstChild;

  // first clear all rows except sorter row
  for (var i = 0, n = tbl.rows.length-1; i < n; i ++)
    tbl.removeChild(tbl.rows[1]);

  // sort array by price
  if (sortType == "ascending")
    arr.sort(mySort);
  else if (sortType == "descending")
    arr.sort(myReverseSort);

  // now re-build table
  for(var n=0;n<arr.length;n+=numcols){
    for(var i=0;i<numrows;i++){
      trow=document.createElement("tr");
      for(var j=0;j<numcols;j++){
        tcell=document.createElement("td");
        if(!arr[n+j]){tcell.innerHTML="";}
        else{tcell.innerHTML=arr[n+j][i];}
        trow.appendChild(tcell);
      }
      tbl.appendChild(trow);
    }
  }
}

function createOptions()
{
  var obj = document.getElementById("myOpts").getElementsByTagName("tbody")[0];

  var temp = new Array();
  for (var i in opts)
    temp[temp.length] = i;
  temp.sort();

  for (var i = 0, n = temp.length; i < n; i++)
  {
    var myRow = document.createElement("tr");
    var myCell = document.createElement("td");

    var myAnchor = document.createElement("a");
    myAnchor.href = "#";
    myAnchor.className = "theClassName";
    myAnchor.innerHTML = temp[i];
    myAnchor.onclick = filter;
    myCell.appendChild(myAnchor);
    myRow.appendChild(myCell);
    obj.appendChild(myRow);
  }

  // add in last link for "ALL"
  var myRow = document.createElement("tr");
  var myCell = document.createElement("td");
  var myAnchor = document.createElement("a");
  myAnchor.href = "#";
  myAnchor.className = "theClassName";
  myAnchor.innerHTML = "ALL";
  myAnchor.onclick = function() {includeArr = data; createTable(data);};
  myCell.appendChild(myAnchor);
  myRow.appendChild(myCell);
  obj.appendChild(myRow);
}

function filter()
{
  var key = this.innerHTML;
  includeArr = new Array();
  for (var i = 0, n = data.length; i < n; i ++)
  {
    var location = data[i][0];
    if (location.indexOf(key) > -1)
      includeArr[includeArr.length] = data[i];
  }
  createTable(includeArr);
}

function mySort(a, b)
{
  var priceStrA = a[1].split("-")[0].substr(1);
  priceStrA = priceStrA.split(",").join("");
  var priceA = parseInt(priceStrA);

  var priceStrB = b[1].split("-")[0].substr(1);
  priceStrB = priceStrB.split(",").join("");
  var priceB = parseInt(priceStrB);

  if (priceA > priceB)
    return 1;
  else if (priceA == priceB)
    return 0;
  else
    return -1;
}

function myReverseSort(a, b)
{
  return (-1 * mySort(a, b));
}
</script>

</head>

<body onload="includeArr = data; createTable(data, ''); createOptions();">

<table id="myOpts"><tbody></tbody></table>

<table id="container" align="center" cellspacing="0" cellpadding="0" border="0" width="400"><tbody>
  <tr>
    <td>
      <a href="#" onclick="createTable(includeArr, 'ascending'); return false;" id="firstSortLink">Sort from Lowest to Highest</a>
      <a href="#" onclick="createTable(includeArr, 'descending'); return false;" id="secondSortLink">Sort from Highest to Lowest</a>
    </td>
  </tr>
</tbody></table>

</body>
</html>

Hi dakyd

You've done it again.

However... (there's always just one more question) if I wanted to 'hard code' whether all the lists appear ascending (or decending) in price, instead of having links, how would I do that?

Also, I want to have a page that has only the menu and some informational blurb on it (Welcome to the website. Use the menu on the left to select... etc) but no property lists. The lists only appears after the user clicks a relevant link on the menu, could this be done and if so, how?

I'm sorry that I have even more questions, especially after you've answered my original question and if you think enough is enough please say so.

Many thanks yet again for your help

Pantyboy

PS

I figured out how to put the 'All' link at the bottom. Just put it after the </tbody> tag. Sorry, I should have tried that first.

P

Hi dakyd

Before I waste any more of your time, I've just figured out how to 'hard code' the ascending/decending problem. I took the '...createTable(includeArr, 'ascending')' statement in the link and put it into the <body> tag in place of 'createTable(data, '')' and it works like a charm.

However, I can't figure out the 'welcome page' thing.

Pantyboy

Hello once more dakyd

You'll be pleased to know there are no more questions.

When I asked this question, I was going to buy some points as I felt that it should have been worth 500 points. So, I've bought some and added an extra 100 for the supplemental questions. I hope that this is OK.

Many thanks for all your help and patience.

Very kind regards

Pantyboy

Ah, I've tried to post and extra 100, but it says that only a maximum of 500 is allowed. It was worth more.

P

Haha, don't sweat the extra questions, I don't mind tweaking code I've provided, it was just getting to be rather lengthy, 'tis all.  Anyhow, glad to hear you got what you wanted, and thanks for the points.

Hi dakyd

Once again, many thanks for your time and patience and many thanks for all the alterations. It was worth every point.

Pantyboy