我正在制作一个遗产网站将离线。 我已经完成了大部分网站，但坚持如何使用JSON进行搜索（之前我从未使用过JSON）。 我有这些搜索选项，用户可以使用不同的选项搜索不同的属性。 我知道如何将JSON文件与html链接但不知道如何链接搜索按钮和JSON文件，因此当用户选择不同的选项时，他们可以根据他们的过滤器选项获得结果。再次搜索将脱机。
链接到表单和json文件的代码片段
表单的代码片段
</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文件，请检查我发布的链接。
I am making a Estate site will be OFFLINE. I have done most of the site but stuck at how to search using JSON (I have never used JSON before). I have these search options in which user can search different properties with different options . I know how to link the JSON file with html but dont know how to link search button and JSON file so when user chooses different option they can get result depending on their filter option.once again the search will be OFFLINE.
link to code snippet of form and json file
Code Snippet of form
</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>for JSON file please check the link I posted.
最满意答案
解决方案是过滤属性数组。 假设您将关于属性的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)); });JSFiddle中的演示
The solution is to filter the array of properties. Let's assume you store your javascript object about properties in variable data, then data.properties is an array of properties and you can filter this array based on the selection criteria like type, price range and bedroom nubers range.
And to make dom manipulation easier, jquery is used in the solution.
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
更多推荐
发布评论