Question

我正在制作一个遗产网站将离线。我已经完成了大部分网站，但坚持如何使用JSON进行搜索（我之前从未使用过JSON）。我有这些搜索选项，用户可以使用不同的选项搜索不同的属性。我知道如何将JSON文件与html链接但不知道如何链接搜索按钮和JSON文件，因此当用户选择不同的选项时，他们可以根据他们的过滤器选项获得结果。再次搜索将脱机。

link to code snippet of form and json file

表单的代码片段

</form>
<h3>Find Your Property</h3>
 <fieldset>
 <label for="Type">Type:</label>   
 <select>
  <option>House</option>
  <option>Flat/Apartments</option>
  <option>Bungalow</option>
   <option>Land</option>

 <label for="Price Range">Price Range:</label>
  <select>
  <option>0</option>
     <option>50,000</option>
     <option>100,000</option>
     <option>150,000</option>
     <option>200,000</option>
  </select>

  to:
  <select>
  <option>50,000</option>
     <option>100,000</option>
     <option>150,000</option>
     <option>200,000</option>
     <option>250,000</option>
     <option>300,000 </option>
     <option>350,000 </option>
     <option>400,000 </option>
     <option>500,000 or more</option>
  </select>

    <label for="Bedroom">Bedroom(s):</label> 
  <select>
  <option>No min</option>
     <option>1</option>
     <option>2</option>
     <option>3</option>

  </select>
  <select>
     <option>No max</option>
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>3</option>
  </select></fieldset>

    </fieldset><button Class="btn"type="button">Show me houses</button></fieldset>




                        </form>

对于JSON文件，请查看我发布的链接。

Answer 1

解决方案是过滤属性数组。假设您将javascript对象存储在变量数据中的属性，然后data.properties是一个属性数组，您可以根据类型，价格范围和卧室范围等选择条件筛选此数组。

为了简化dom操作，在解决方案中使用了jquery。

var getProperties = function(type, minPrice, maxPrice, minBed, maxBed) {
    if (typeof minBed === "undefined") { minBed = 0; }
    if (typeof maxBed === "undefined") { maxBed = Number.MAX_VALUE; }

    return data.properties.filter(function (elem) {
        var expType = type.indexOf(elem.type) >= 0;
        var expPrice = elem.price >= minPrice && (maxPrice === Number.MAX_VALUE ? true : elem.price <= maxPrice);
        var expBedrooms = (maxBed === Number.MAX_VALUE) ? elem.bedrooms >= minBed : elem.bedrooms >= minBed && elem.bedrooms <= maxBed;
        return expType && expPrice && expBedrooms;
    });
}

$("#showHouses").click(function () {
    var type = $("#type").val();
    var minPrice = parseInt($("#minPrice").val().replace(",", ""));
    var maxPrice = $("#maxPrice").val().indexOf("more") >= 0 ? Number.MAX_VALUE : parseInt($("#maxPrice").val().replace(",", ""));
    var minBed = isNaN( parseInt($("#minBed").val()))? 0 : parseInt($("#minBed").val());
    var maxBed = isNaN(parseInt($("#maxBed").val())) ? Number.MAX_VALUE : parseInt($("#maxBed").val());

    var properties = getProperties(type, minPrice, maxPrice, minBed, maxBed);
    $("#placeHolder").text(JSON.stringify(properties));
});

DEMO in JSFiddle

使用JSON文件进行脱机搜索

1 个答案: