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 回答