javascript - 仅使用JavaScript对象数组创建小型可搜索数据库。没有AJAX，没有PHP

我想创建一个小型的数据库或项目集合-仅约30个-您可以仅使用JavaScript进行搜索。

例如-假设我有20套房屋要出租，我希望学生能够搜索4或5个房间的房屋。

我可以这样创建房屋对象:

function house(address, rooms, bathrooms){
this.address=address;
this.rooms=rooms;
this.bathrooms=bathrooms;
}

var property1 = new house("10 Park Way","4","1");
var property2 = new house("61 Park Avenue", "5","2");
var property3 = new house("585 Park Road", "3", "1");

我希望能够按“房间”搜索此列表，并显示地址，房间数和浴室数。

注意:我知道我写的方式不是数组，但是我将使用数组，因此可以使用for循环遍历属性并按以下方式评估它们:

if(property[i].rooms == roomquery){
    document.write('Address:' + property[i].address + '.<p>');
    document.write('Address:' + property[i].rooms + '.<p>');
    document.write('Address:' + property[i].bathrooms + '.<p>');
}

简单吗？

除非我不知道如何将roomquery变量从表单传递到脚本。

流程的顺序为:搜索页面->结果页面->详细信息页面

用户搜索并获得结果列表。可以选择在结果页面上更详细地查看属性，将结果中的数据传递到要在详细信息页面上重新格式化的页面。当然，有关数组中每个属性的数据会更多，我可以将此数据提供给不可见标签的id或value属性，以进行收集并重新提交给详细信息页面上的脚本。

我知道我可以使用PHP来做到这一点，而且我知道可以通过将roomquery变量发送到同一页面上的脚本并在搜索页面上进行更改来做到这一点。

但是我想做的是使用GET或任何其他方法将数据(仅一个数字)发送到结果页上的脚本，因为这样我可以从任何要发送到搜索的页面上运行搜索页。

我已经在互联网上搜索了此信息，但没有提出任何建议。一定有办法。

最佳答案

由于您要在客户端完全使用房屋的静态 list ，因此您可以使用少量基本Javascript在单个页面上完成此任务。无需提交表格。

设置基本的HTML表单，并在其中显示结果:

<form>
    <select name="rooms"></select>
</form>
<div id="results"></div>

编写一些JavaScript来监听change事件(此示例使用jQuery)，进行搜索并输出结果:

var houses = [/* ... */]
$('select[name=rooms]').on('change', function () {
    var rooms = $('select[name=rooms]').val();

    $('#results').empty();

    for (var i = 0; i < houses.length; i++) {
        if (houses[i].rooms == rooms) {
            $('#results').append('<p>Address: ' + houses[i].address + '</p>');
        }
    }
});

您可以得到更多的创新，并添加更多的结构，但这应该涵盖了基础知识。

如果您愿意包括提交页面，则可以retrieve a parameter from the query string by parsing window.location.search 。我认为将其保持在一页是更好的体验。