Javascript problem with search
I am trying to write some code for a simple search function. Basically, I want to have an array of products, which are updated dynamically when a user clicks on a different radio button (i.e selecting the laptop radio button displays all products that are laptops).
I want a slider which sets a price threshold, i.e if you put it really far left it will only display the cheaper laptops, really far right and it displays the more expensive ones.
It doesn't need to query a database or anything like that, it only needs very limited functionality. My code at the moment is legacy code, originally I was going to put a search function, but I can't figure out how to do that at all.
Can anyone help me with this please?
Here is my code so far :
<html>
<head>
<script type="text/javascript">
var arrayOfProducts = new Array();
arrayOfProducts[0] = "Dell Laptop";
arrayOfProducts[1] = "Dell PC";
arrayOfProducts[2] = "Neither";
function processForm()
var newObj = document.createElement('div');
var docBody = document.getElementsByTagName('body').item(0);
docB开发者_运维技巧ody.appendChild(newObj);
}
</script>
</head>
<body>
<form name="myForm">
<input label="What would you like to search for?"type="text" name="textBox" id="textBox">
<div id="products">
<input type="radio" name="laptop" value="laptop"> Laptops
<input type="radio" name="pc" value="pc"> PC's
</div>
</form>
<input type="button" value="Test" onclick="processForm()">
</body>
</html>
A better way to do this would be to use a tab panel.
You have a number of tabs that hide/expose divs based on which tab is selected.
Here is a demo: http://vieln.e-supinfo.net/jquery/
Ok, here is something you can start from (needs styling, etc) And each search parameter searches independently, not cumulative (so if you select Laptop, and then change the price slider, it ignores your prior selection). Also, so that you don't have to code the product data into the page, this pulls in an external XML file (dell.xml)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
//making the product class
function Product (brand) {
this.brand = brand;
this.img="";
this.link_destination="";
this.formFactor = "";
this.price="";
this.tags="";
}
//making the array to hold the products
var arrayOfProducts = new Array();
//converting the xml file into objects and adding them to the array
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
x=xmlhttp.responseXML.documentElement.getElementsByTagName("PRODUCT");
product_brand=xmlhttp.responseXML.documentElement.getElementsByTagName("BRAND");
product_formfactor=xmlhttp.responseXML.documentElement.getElementsByTagName("FORMFACTOR");
product_img=xmlhttp.responseXML.documentElement.getElementsByTagName("PIC_URL");
product_link=xmlhttp.responseXML.documentElement.getElementsByTagName("LINK_DESTINATION");
product_price=xmlhttp.responseXML.documentElement.getElementsByTagName("PRICE");
product_tags=xmlhttp.responseXML.documentElement.getElementsByTagName("TAGS");
product_count=x.length;
for(var i=0;i<product_count;i++){
var name='product'+i;
name = new Product(product_brand[i].firstChild.nodeValue);
name.image=product_img[i].firstChild.nodeValue;
name.link_destination=product_link[i].firstChild.nodeValue;
name.formFactor=product_formfactor[i].firstChild.nodeValue;
name.price=product_price[i].firstChild.nodeValue;
name.tags=product_tags[i].firstChild.nodeValue;
arrayOfProducts.push(name);
}
}
}
xmlhttp.open("GET","dell.xml",true);
xmlhttp.send();
//take the value from the checked radio button, and find matching array items with that same form factor
function processRadio(opt) {
var products=arrayOfProducts.length;
var results="<table>";
for(z=0;z<products;z++){
if(arrayOfProducts[z].formFactor==opt){
//turn each result into a table entry
results+="<tr><td><img width=\"150\" src=\""+arrayOfProducts[z].image+"\"/></td><td>"+arrayOfProducts[z].brand+" "+arrayOfProducts[z].formFactor+"<br/>$"+arrayOfProducts[z].price+" <a href=\""+arrayOfProducts[z].link_destination+"\">Click here for some reason</a></td></tr>";
}
}
results+="</table>";
document.getElementById("results").innerHTML=results;
}
//take search text and look for matches in the tags property
function searchField(opt) {
var products=arrayOfProducts.length;
var results="<table>";
opt.toLowerCase();
for(z=0;z<products;z++){
if(arrayOfProducts[z].tags.indexOf(opt)>=0){
//turn each result into a table entry
results+="<tr><td><img width=\"150\" src=\""+arrayOfProducts[z].image+"\"/></td><td>"+arrayOfProducts[z].brand+" "+arrayOfProducts[z].formFactor+"<br/>$"+arrayOfProducts[z].price+" <a href=\""+arrayOfProducts[z].link_destination+"\">Click here for some reason</a></td></tr>";
}
}
results+="</table>";
document.getElementById('needle').value="";
document.getElementById("results").innerHTML=results;
}
//take values from slider and find prices that are between the values
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 2000,
values: [ 300, 1300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
var products=arrayOfProducts.length;
var results="<table>";
for(z=0;z<products;z++){
if((arrayOfProducts[z].price>=ui.values[ 0 ])&&(arrayOfProducts[z].price<=ui.values[ 1 ])){
//turn each result into a table entry
results+="<tr><td><img width=\"150\" src=\""+arrayOfProducts[z].image+"\"/></td><td>"+arrayOfProducts[z].brand+" "+arrayOfProducts[z].formFactor+"<br/>$"+arrayOfProducts[z].price+" <a href=\""+arrayOfProducts[z].link_destination+"\">Click here for some reason</a></td></tr>";
}
}
results+="</table>";
document.getElementById('needle').value="";
document.getElementById("results").innerHTML=results;
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<input id="needle" type="text" name="textBox"/><button onclick="searchField(document.getElementById('needle').value)">Search</button>
<div id="products">
Show me:<br/>
<input type="radio" name="ff" value="Laptop" onclick="processRadio(this.value)"> Laptops<br/>
<input type="radio" name="ff" value="PC" onclick="processRadio(this.value)"> PC's
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-range"></div>
</div>
<div id="results"></div>
</body>
</html>
and here's the XML:
<?xml version="1.0" encoding="utf-8"?>
<ROOT>
<PRODUCT>
<BRAND>Dell</BRAND>
<FORMFACTOR>Laptop</FORMFACTOR>
<PIC_URL>http://i.dell.com/images/global/products/laptop_studio/laptop_studio_highlights/laptop-studio-15-edge-to-edge-design4.jpg</PIC_URL>
<LINK_DESTINATION>http://somewhere</LINK_DESTINATION>
<PRICE>600</PRICE>
<TAGS>laptop, dell, black,studio</TAGS>
</PRODUCT>
<PRODUCT>
<BRAND>Dell</BRAND>
<FORMFACTOR>Laptop</FORMFACTOR>
<PIC_URL>http://i.dell.com/images/global/products/laptop-alienware/laptop-alienware-highlights/laptop-alienware-m17x-design4.jpg</PIC_URL>
<LINK_DESTINATION>http://somewhere_else</LINK_DESTINATION>
<PRICE>1200</PRICE>
<TAGS>laptop, dell, alienware, alien</TAGS>
</PRODUCT>
<PRODUCT>
<BRAND>Dell</BRAND>
<FORMFACTOR>PC</FORMFACTOR>
<PIC_URL>http://i.dell.com/images/global/products/inspndt/inspndt_highlights/desktop-inspiron-537-design3.jpg</PIC_URL>
<LINK_DESTINATION>http://somewhere_new</LINK_DESTINATION>
<PRICE>400</PRICE>
<TAGS>pc, desktop, tower, dell, inspiron</TAGS>
</PRODUCT>
</ROOT>
加载中,请稍侯......
精彩评论