javascript - 多个输入字段触发的绑定(bind)事件

Question

绑定(bind)由 jquery 中相互依赖的多个输入字段触发的事件的最佳实践是什么？

例如:让我们使用一个搜索引擎，它根据在下面的字段中输入和选择的内容来搜索学生。

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

如果没有触发这些事件的按钮，实现以下目标的最佳方法是什么:

1. 用户在其中一个输入字段中输入或选择值时立即显示搜索结果，并在用户在其他字段选项中输入或选择值时优化搜索。

2. 仅在每个字段具有有效值后才显示搜索结果。

任何意见都将受到赞赏。

Answer 1

我已经把这个 jsFiddle http://jsfiddle.net/VJwpv/1/ 放在一起了.

如果您正在考虑使用 JavaScript 进行验证，那么我建议您查看此 jQuery Validation plugin

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();
    });
});​