Price List

HTML

<form id="formSearch">
    <div>
        <label for="searchBox">Search products here:</label>
        <input type="text" placeholder="Type text here to search product" id="searchBox">
    </div>
    <div id="buttons">
        <button id="getAll">GET ALL PRODUCTS</button>
    </div>
</form>
<div id="outputPlace"></div>

JavaScript

(function () { //start anonymous function

    var list = {
        "listOfProducts": [{
            "name": "hard disk",
            "price": "50$",
            "quality": "good"
        }, {
            "name": "monitor",
            "price": "100$",
            "quality": "very good"
        }, {
            "name": "speakers",
            "price": "20$",
            "quality": "not bad"
        }, {
            "name": "headphones",
            "price": "12$",
            "quality": "bad"
        }, {
            "name": "mobile phone",
             "price": "300$",
             "quality": "excellent"
        }, {
            "name": "usb memory",
            "price": "30$",
            "quality": "the best"
        }]
    },

    target = document.getElementById("outputPlace"),
    searchForm = document.getElementById("formSearch"),
    productList = list.listOfProducts,
    listLength = productList.length,
    searchValue = document.getElementById("searchBox");

    var listMethods = {
        searchList: function (event) {
            event.preventDefault();
            var i,
                searchInput = searchValue.value
            target.innerHTML = "";
            if (listLength > 0 && searchInput !== "") {
                for (i = 0; i < listLength; i++) {
                    var product = productList[i],
                        whatIsFound = product.name.indexOf(searchInput);
                    if (whatIsFound !== -1) {
                        target.innerHTML += '<p>' + product.name + ', ' + product.price + ', ' + product.quality + '<a href="http//www.facebook.com">click here to buy</a></p>'
                    }
                }
            }
        }
    };

    searchForm.addEventListener("submit", listMethods.searchList, false);

})(); //end anonymous function