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問題與搜索

回答

相關問題