0

jqueryで互いに依存している複数の入力フィールドによってトリガーされるイベントをバインドするためのベストプラクティスは何ですか?

たとえば、以下のフィールドで入力および選択された内容に基づいて学生を検索する検索エンジンを考えてみましょう。

1. text boxes
2. select lists
3. select boxes
4. option buttons

これらのイベントをトリガーするボタンがない場合、次のことを達成するための最良の方法は何ですか?

  1. ユーザーがいずれかの入力フィールドで値を入力または選択するとすぐに検索結果を表示し、ユーザーが他のフィールド オプションで値を入力または選択すると検索を絞り込みます。

  2. 各フィールドに有効な値がある場合にのみ検索結果を表示します。

どんな入力も感謝されます。

4

2 に答える 2

2

これを jsFiddle http://jsfiddle.net/VJwpv/1/にまとめました。

JavaScript を使用した検証を検討している場合は、このjQuery Validation プラグインを検討することをお勧めします。

HTML

<div id="searchForm"> 
    <input id="textBox" class="searchField" type="text" />
    <select id="dropDown" class="searchField">
        <option value="Option1">Option1</option>
        <option value="Option2">Option2</option>
    </select>
    <input id="checkbox1Value" type="checkbox" name="checkbox" value="Checkbox1" />Checkbox1 
    <input id="checkbox2Value" type="checkbox" name="checkbox" value="Checkbox2" />Checkbox2
    <input type="radio" name="radio" value="Radio1" /> Radio1
    <input type="radio" name="radio" value="Radio2" /> Radio2
</div>

<div id="results"></div>

JavaScript

function validateForm() {
    // if valid
    return true;
    // else return false
}

function performSearch() {
    var textBoxValue = $("#textBox").val();
    var dropDownValue = $("#dropDown").val();
    var checkbox1Value = $("#checkbox1Value").is(":checked");
    var checkbox2Value = $("#checkbox2Value").is(":checked");
    var radioValue = $("input:radio[name=radio]:checked").val();
    // What you'd actually do here is an AJAX call to get the search results
    // and pass all the values defined above in the request
    $("#results").html("Textbox: " + textBoxValue + ". Dropdown: " + dropDownValue + ". Checkbox1: " + checkbox1Value + ". Checkbox2: " + checkbox2Value + ". Radio: " + radioValue);
}

function onChange() {
    if (validateForm()) {
        performSearch();
    }
}

$(document).ready(function() {
    $("#searchForm input, #searchForm select").change(function() {
        onChange();
    });
});​
于 2012-08-04T01:06:41.087 に答える
1

すべてに共通のクラス名を付けて、クラス セレクターを使用して変更イベントをバインドするだけです。

HTML:

<input type="text" class="search-field" />
<input type="text" class="search-field" />
<select class="search-field" ><option>1</option><option>2</option></select>
<input type="radio" class="search-field" />

JS:

$('.search-field').change(function() {
    // validate all search field values
    // display search results based on values
    // if search results already shown, filter based on $(this).val()
});

これらのフィールドが多数ある場合は、ハンドラーを各フィールドにバインドする (上記のコードのように) よりも、委任されたイベント ハンドラーを使用するとパフォーマンスが向上します。

HTML:

<div id='parent'>
    <input type="text" class="search-field" />
    <input type="text" class="search-field" />
    <select class="search-field" ><option>1</option><option>2</option></select>
    <input type="radio" class="search-field" />
</div>

JS:

$('#parent').on('change', '.search-field', function() {
    // validate all search field values
    // display search results based on values
    // if search results already shown, filter based on $(this).val()
});
于 2012-08-04T00:33:53.183 に答える