Javascript问题与搜索

我想写一些简单的搜索功能的代码。基本上，我想拥有一系列产品，当用户点击不同的单选按钮时（即选择笔记本电脑单选按钮显示所有笔记本电脑产品），这些产品会动态更新。Javascript问题与搜索

我希望有一个滑块，设置一个价格门槛，即如果你把它真正的最左边它只会显示更便宜的笔记本电脑，真正最右边，并显示更昂贵的。

它不需要查询数据库之类的东西，只需要非常有限的功能。我现在的代码是遗留代码，最初我打算放置一个搜索功能，但我无法弄清楚该怎么做。

谁能帮我这个好吗？

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

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

来源

2011-04-20 Albatross32

以及你“再创造一个新的div，并将它附加到''但这样做没有别的给它的时间提前（如确定哪个单选按钮被选中，并相应地填充DIV） – 2011-04-20 14:18:19

正因为此，在阵列中的项目有资格作为被PC类别，如果它包含字符串，“PC”和笔记本电脑，如果它包含字符串，“笔记本电脑”（不区分大小写）？ – 2011-04-20 14:18:22

我建议你修改你的标题，使其更加精确。几乎任何改变都会有所帮助。 – Smandoli 2011-04-20 14:39:04

一个更好的办法来做到这一点是使用一个标签面板。

你有一个数字，隐藏标签/揭示基于选择哪个选项卡上的div。

这里是一个演示：http://vieln.e-supinfo.net/jquery/

来源

2011-04-20 14:16:50

好吧，这里是你可以从开始（需求造型等），每个搜索参数的搜索独立，不累计（所以如果你选择笔记本电脑，然后更改价格滑块，它会忽略您的事先选择）。此外，这样你就不必在产品数据代码放到页面，在此拉动外部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>

来源

2011-04-20 17:34:45

Javascript问题与搜索

回答

相关问题