Question

我正在尝试为简单的搜索功能编写一些代码。基本上，我想拥有一系列产品，当用户点击另一个单选按钮时，它会动态更新（即选择笔记本电脑单选按钮显示所有笔记本电脑产品）。

我想要一个设置价格门槛的滑块，即如果你把它放在最左边，它只会显示更便宜的笔记本电脑，真的是最右边的，它会显示更贵的笔记本电脑。

它不需要查询数据库或类似的东西，它只需要非常有限的功能。我的代码目前是遗留代码，最初我打算使用搜索功能，但我根本无法弄清楚如何做到这一点。

有人可以帮我这个吗？

到目前为止，这是我的代码：

<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);
            docBody.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>

Answer 1

更好的方法是使用标签面板。

您有许多选项卡可根据选择的选项卡隐藏/显示div。

以下是演示：http://vieln.e-supinfo.net/jquery/

Answer 2

好的，你可以从这里开始（需要样式等）并且每个搜索参数独立搜索，而不是累积（因此，如果你选择笔记本电脑，然后更改价格滑块，它会忽略你之前的选择）。此外，这样您就不必将产品数据编码到页面中，这会引入外部XML文件（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>

这是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>

搜索的Javascript问题

2 个答案: