4

JavaScriptだけで検索できる、アイテムの小さなデータベースまたはコレクション（約30個のみ）を作成したいと思います。

たとえば、賃貸する家が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またはその他の方法を使用して、結果ページのスクリプトに単一の数値であるデータを送信することです。これにより、検索に送信する任意のページから検索を実行できるためです。ページ。

私はこれをインターネットで検索しましたが、何も思いつきません。方法があるに違いありません。

4

5 に答える 5

2

JSONを使用してみませんか。例を次に示します。

var json = {
    "house": [{
            "address": "10 Park Way",
            "num1": 4,
            "num2": 1},
        {
            "address": "61 Park Avenue",
            "num1": 5,
            "num2": 2},
        {
            "address": "585 Park Road",
            "num1": 3,
            "num2": 1}]

};

var houses = json["house"];
for(var i=0; i < houses.length; ++i) {
    var houses_i = houses[i];
    if(houses_i["address"] == '10 Park Way') {
        alert('Found WAY!!!');
        break;
    }
}
于 2012-11-28T17:33:54.297 に答える
1

完全にクライアント側で家の静的リストを操作しているので、少量の基本的なJavascriptを使用して単一のページでこれを実行できます。フォームの送信は必要ありません。

  1. 結果を表示する場所を使用して、基本的なHTMLフォームを設定します。

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

  2. 変更イベントをリッスンするjavascriptを記述し（この例では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>');
        }
    }
});

あなたはこれよりももっと凝ったものを手に入れ、より多くの構造を追加することができますが、それは基本をカバーするはずです。

ページ送信を含めることに関心がある場合は、解析することでクエリ文字列からパラメータを取得window.location.searchできます。でも、1ページに収めたほうがいいと思います。

于 2012-11-28T17:36:59.553 に答える
0

完全な答えではありませんが、Web SQLの使用を検討しましたか？これにより、JavaScriptにインポートしたデータに対してSQLクエリを実行できます。

于 2012-11-28T17:18:12.293 に答える
0

ここで説明するような単純な関数を使用して、リクエストクエリ文字列から値を解析できます。

クエリ文字列を作成するために、入力が非表示のフォームを作成できます。

<form action="myresultspage.html" method="get">
    <input type="hidden" id="property" name="property" value="" />
    <input type="submit" />
</form>

JSは、のようなものを使用して隠れた変数に書き込むことができますdocument.getElementByid('property').value = newValue。このフォームを送信すると、URLにリダイレクトされますmyresultspage.html?property=newValue。

于 2012-11-28T17:24:18.483 に答える
0

onchangeイベントから検索関数を呼び出す必要があります。

<script type="text/javascript">
function search(roomquery) {
// put your for loop here
}
</script>

rooms: <select onchange="search(this.options[selectedIndex].text);">
    <option>1</option>
    <option>2</option>
</select>​

フィドルを参照してください：http：//jsfiddle.net/H9jkd/

于 2012-11-28T18:01:09.213 に答える