为复选框元素JavaScript创建动态搜索栏

Question

I'm trying to make a search bar which shows elements based on their text according to what you enter in a search bar. But most instructions online are about arrays or lists and I can't adapt my code to include those.

I have a succession of checkboxes created according to an array and I don't know how to proceed.

I whould like something like if I write "J" in the search bar, I would see the checkboxes "January" "June" "July".

Here is a snippet to help you to understand. I would prefer Javascript instead of jQuery.

 //array of options (change this array and you change the checkboxes) var choices = new Array(); choices[0] = "January"; choices[1] = "February"; choices[2] = "March"; choices[3] = "April"; choices[4] = "May"; choices[5] = "June"; choices[6] = "July"; choices[7] = "August"; choices[8] = "September"; choices[9] = "October"; choices[10] = "November"; choices[11] = "December"; //array of value which have to be automaticly selected var target = new Array() target[0] = "9"; target[1] = "8"; target[2] = "11"; var cbh = document.getElementById('checkboxes'); var val = ''; var cap = ""; var j = ""; var t = document.getElementById('t'); // the loop is creating the checkboxes with name, value... for (var i in choices) { //Name of checkboxes are their number so I convert the i into a string. j = i.toString(); val = j; //cap will be the value/text of choices[i] var cb = document.createElement('input'); var label = document.createElement("label"); cap = choices[i]; var text = document.createTextNode(cap); cb.type = 'checkbox'; cbh.appendChild(cb); cb.name = cap; cb.value = val; label.appendChild(cb); label.appendChild(text); cbh.appendChild(label); cb.addEventListener('click', updateText) if(target.indexOf(i)>=0){ cb.checked =true ; } } //function which update the text area according to which checkbox is selected or not updateText(); function updateText() { t.value = [null, ...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s, el) => el && el.checked ? s = (s || '') + el.value + '$#' : s || '') } 

  * { box-sizing: border-box; } #data { padding:5px; width:100vw; } .multiselect { overflow: visible; padding:0; padding-left:1px; border:none; background-color:#eee; width:100vw; white-space: normal; height:75px; } .checkboxes { height:100px; width:100px; border:1px solid #000; background-color:white; margin-left:-1px; display:inline-block; } label { display: inline-block; border: 1px grey solid; padding:5px; } 

 <span onclick="">All</span> | <span onclick="">Selected</span> <input type="text" id="SearchBar" placeholder="Search for options.."> <form> <div id="data"> <div class="multiselect"> <div id="c_b"> <div id="checkboxes"> </div> </div> </div> </div> </form> <textarea id="t"></textarea> 

Answer 1

You can use the oninput -attribute on the search-field to call a JS-function (let's just call it search(query) for this example). The call should look somewhat like this:

<input oninput="search(this.value);" type="text" id="SearchBar" placeholder="Search for options.." />

The search() -function the iterates through the choices -array and compare whether the parameter given to the function matches or is included in the current member of the array. If that's not the case, you can add some kind of .hidden class to the nth <label> where n is the choice you are currently iterating through. If it is the case, you can remove the class. You can do that using the following jQuery functions (let's say i is the variable that holds the index of the current element):

$("label:nth-child(" + i + ")").addClass("hidden");

and

$("label:nth-child(" + i + ")").removeClass("hidden");

The .hidden -class should look like this:

.hidden {
    display:none;
}

I hope this helps. If you have any questions, feel free to ask.

Answer 2

You can use this JavaScript/JQuery function:

function updateCheckboxes(x) {
  if ($('#SearchBar').val() == '') {
    $('#checkboxes > label').show();
  } else {
    $('#checkboxes > label').hide();
    $('#checkboxes > label:contains('+$('#SearchBar').val()+')').show();
  }
}

And call it oninput in the input, with this line:

<input id="SearchBar" placeholder="Search for options.." type="text" oninput="updateCheckboxes(this)" autocomplete="off">

And include JQuery like this at the bottom/top of the head/body;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 //array of options (change this array and you change the checkboxes) var choices = new Array(); choices[0] = "January"; choices[1] = "February"; choices[2] = "March"; choices[3] = "April"; choices[4] = "May"; choices[5] = "June"; choices[6] = "July"; choices[7] = "August"; choices[8] = "September"; choices[9] = "October"; choices[10] = "November"; choices[11] = "December"; //array of value which have to be automaticly selected var target = new Array(); target[0] = "9"; target[1] = "8"; target[2] = "11"; var cbh = document.getElementById('checkboxes'); var val = ''; var cap = ""; var j = ""; var t = document.getElementById('t'); // the loop is creating the checkboxes with name, value... for (var i in choices) { //Name of checkboxes are their number so I convert the i into a string. j = i.toString(); val = j; //cap will be the value/text of choices[i] var cb = document.createElement('input'); var label = document.createElement("label"); cap = choices[i]; var text = document.createTextNode(cap); cb.type = 'checkbox'; cbh.appendChild(cb); cb.name = cap; cb.value = val; label.appendChild(cb); label.appendChild(text); cbh.appendChild(label); cb.addEventListener('click', updateText); if (target.indexOf(i) >= 0) { cb.checked = true; } } updateText(); //function which update the text area according to which checkbox is selected or not function updateText() { t.value = [null, ...document.querySelectorAll('#checkboxes [type="checkbox"]')].reduce((s, el) => el && el.checked ? s = (s || '') + el.value + '$#' : s || ''); } $.expr[":"].contains = $.expr.createPseudo(function(arg) { return function( elem ) { return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; }); function updateCheckboxes(x) { if ($('#SearchBar').val() == '') { $('#checkboxes > label').show(); } else { $('#checkboxes > label').hide(); $('#checkboxes > label:contains('+$('#SearchBar').val()+')').show(); } } 

 * { box-sizing: border-box; } #data { padding: 5px; width: 100vw; } .multiselect { overflow: visible; padding: 0; padding-left: 1px; border: none; background-color: #eee; width: 100vw; white-space: normal; height: 75px; } .checkboxes { height: 100px; width: 100px; border: 1px solid #000; background-color: white; margin-left: -1px; display: inline-block; } label { display: inline-block; border: 1px grey solid; padding: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <span onclick="">All</span> | <span onclick="">Selected</span> <form> <input id="SearchBar" placeholder="Search for options.." type="text" oninput="updateCheckboxes(this)" autocomplete="off"> </form> <form> <div id="data"> <div class="multiselect"> <div id="c_b"> <div id="checkboxes"></div> </div> </div> </div> </form> <textarea id="t"></textarea> </body> </html> 

to make the search case-insensitive, add this amazing JQuery, found here .

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});