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

Question

I have a form with two text field inputs the use a js autocomplete script to improve the accuracy of input and because it is better UI than a select box for long lists.

The first input has about 50 autocomplete options. The second has 2000. Ideally, the Authority input field would limit the autocomplete options for Schools because each school only belongs to one authority.

The question is, can javascript either filter the schools autocomplete options or display different prefiltered autocomplete option based in what is entered in the first input. Say, when focus leaves the first input?

<!-- 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">

Thanks

Answer 1

Im not sure that I understood your logic because if you have 2000 schools why do you have only 50 authorities? But anyways you can create 1 array "schools" and 1 object "authority" - the array will contain all schools and the object will contain all authorities as keys and every key will have a value array which will contain school names. So when the user click on second input the script will check if "authority" input is not empty and will filter the schools by chosen authority. The implementation can looks like this:

I'm using jQuery UI for autocomplete

 $(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>