Question

我有一个带有两个文本字段输入的表单，使用js自动完成脚本可以提高输入的准确性，并且因为它的UI比长列表的选择框更好。

第一个输入有大约50个自动完成选项。第二个是2000。理想情况下，“授权单位”输入字段将限制“学校”的自动填充选项，因为每所学校仅属于一个授权单位。

问题是，javascript可以根据第一个输入中输入的内容来过滤学校的自动完成选项，或显示其他预先过滤的自动完成选项。说，焦点何时离开第一个输入？

<!-- Authority ~50 options -->
<label for="signup_custom_values_ata_authority_custom">Authority</label>
<input class="text form-control autoc_authority" id="" name="" type="text">

<!-- School ~2000 total -->
<label for="signup_custom_values_ata_school_custom">School</label>
<input class="text form-control autoc_schools" id="signup_custom_values_ata_school_custom" name="signup[custom_values][ata_school]" type="text">

谢谢

Answer 1

我不确定我是否理解您的逻辑，因为如果您有2000所学校，为什么您只有50所学校？但是无论如何，您都可以创建1个“学校”数组和1个“权限”对象-该数组将包含所有学校，并且该对象将包含所有权限作为键，并且每个键都有一个包含学校名称的值数组。因此，当用户单击第二个输入时，脚本将检查“权限”输入是否不为空，并将按所选权限过滤学校。该实现可以如下所示：

我正在使用jQuery UI进行自动填充

$(function () {

    let authority = {
        "Authority_1": ["school_1", "school_2", "school_3", "school_7", "school_8"],
        "Authority_2": ["school_1", "school_3", "school_4"],
        "Authority_3": ["school_1"],
        "Authority_4": ["school_1", "school_4"]
    }
    let schools = [
        "school_1",
        "school_2",
        "school_3",
        "school_4",
        "school_5",
        "school_6",
        "school_7",
        "school_8",
        "school_9",
        "school_10",
        "school_11",
    ];

    $("#input1").autocomplete({
        source: Object.keys(authority)
    });
    $("#input2").autocomplete({
        source: schools
    });
    $("#input2").on('click', setInput2Values);

    function setInput2Values() {

        let firstInputValue = $("#input1").val();

        if (Object.keys(authority).indexOf(firstInputValue) != -1) {

            $("#input2").autocomplete({
                source: schools.filter(e => {
                    return authority[firstInputValue].indexOf(e) != -1
                })
            });
        } else {
            $("#input2").autocomplete({
                source: schools
            });
        }
    }
});

.ui-widget {
    display: inline-block;
    margin-left: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="ui-widget">
    <label for="input1">first input: </label>
    <input id="input1">
</div>

<div class="ui-widget">
    <label for="input2">second input: </label>
    <input id="input2">
</div>

基于文本输入字段值的JS逻辑

1 个答案: