Javascript проблема с поиском - PullRequest
Новая
       7

Javascript проблема с поиском

0 голосов
/ 20 апреля 2011

Я пытаюсь написать код для простой функции поиска. По сути, я хочу иметь массив продуктов, которые обновляются динамически, когда пользователь нажимает другую радиокнопку (т. Е. При выборе радиокнопки ноутбука отображаются все продукты, являющиеся ноутбуками).

Мне нужен ползунок, который устанавливает ценовой порог, т. Е. Если вы поместите его очень далеко влево, он покажет только более дешевые ноутбуки, очень далеко справа, и он покажет более дорогие.

Ему не нужно запрашивать базу данных или что-то в этом роде, ему нужны только очень ограниченные функциональные возможности. Мой код на данный момент является устаревшим кодом, изначально я собирался добавить функцию поиска, но я не могу понять, как это сделать вообще.

Может кто-нибудь помочь мне с этим, пожалуйста?

Вот мой код: 

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

Ответы [ 2 ]

0 голосов
/ 20 апреля 2011

Хорошо, вот то, с чего вы можете начать (требуется стилизация и т. Д.). Каждый поисковый параметр выполняет поиск независимо, а не кумулятивно (поэтому, если вы выберете «Ноутбук», а затем измените ползунок цены, он игнорирует ваш предыдущий выбор).Кроме того, чтобы вам не приходилось кодировать данные продукта на странице, это приводит к извлечению внешнего 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>
0 голосов
/ 20 апреля 2011

Лучший способ сделать это - использовать панель вкладок.

У вас есть несколько вкладок, которые скрывают / открывают элементы div в зависимости от того, какая вкладка выбрана.демо: http://vieln.e-supinfo.net/jquery/

...