javascript - 使用 JSON 文件进行离线搜索

Question

我正在制作一个 Estate 网站，该网站将处于离线状态。我已经完成了网站的大部分工作，但仍然坚持如何使用 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