为复选框元素创建动态搜索栏 JavaScript
Create a Dynamic search bar for checkboxes elements JavaScript
我正在尝试制作一个搜索栏,根据您在搜索栏中输入的内容,根据文本显示元素。但是大多数在线说明都是关于数组或列表的,我无法调整我的代码以包含这些。
我有一系列根据数组创建的复选框,但我不知道如何继续。
如果我在搜索栏中输入 "J",我会看到复选框 "January" "June" "July".
这里有一个片段可以帮助你理解。我更喜欢 Javascript 而不是 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>
您可以在搜索字段上使用 oninput
属性来调用 JS 函数(在本例中我们将其称为 search(query)
)。调用应该看起来像这样:
<input oninput="search(this.value);" type="text" id="SearchBar" placeholder="Search for options.." />
search()
-函数遍历choices
-数组并比较给函数的参数是否匹配或包含在数组的当前成员中。如果不是这种情况,您可以将某种 .hidden
class 添加到第 n 个 <label>
,其中 n 是您当前正在迭代的选择。如果是这样,您可以删除 class。您可以使用以下 jQuery 函数来做到这一点(假设 i
是保存当前元素索引的变量):
$("label:nth-child(" + i + ")").addClass("hidden");
和
$("label:nth-child(" + i + ")").removeClass("hidden");
.hidden
-class 应该是这样的:
.hidden {
display:none;
}
希望对您有所帮助。如果您有任何问题,请随时提出。
您可以使用这个 JavaScript/JQuery 函数:
function updateCheckboxes(x) {
if ($('#SearchBar').val() == '') {
$('#checkboxes > label').show();
} else {
$('#checkboxes > label').hide();
$('#checkboxes > label:contains('+$('#SearchBar').val()+')').show();
}
}
并在输入中调用它 oninput
,使用以下行:
<input id="SearchBar" placeholder="Search for options.." type="text" oninput="updateCheckboxes(this)" autocomplete="off">
并在 head/body 的 bottom/top 处包含 JQuery;
<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>
编辑: 使搜索不区分大小写,添加这个惊人的 JQuery,发现 here.
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
我正在尝试制作一个搜索栏,根据您在搜索栏中输入的内容,根据文本显示元素。但是大多数在线说明都是关于数组或列表的,我无法调整我的代码以包含这些。
我有一系列根据数组创建的复选框,但我不知道如何继续。
如果我在搜索栏中输入 "J",我会看到复选框 "January" "June" "July".
这里有一个片段可以帮助你理解。我更喜欢 Javascript 而不是 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>
您可以在搜索字段上使用 oninput
属性来调用 JS 函数(在本例中我们将其称为 search(query)
)。调用应该看起来像这样:
<input oninput="search(this.value);" type="text" id="SearchBar" placeholder="Search for options.." />
search()
-函数遍历choices
-数组并比较给函数的参数是否匹配或包含在数组的当前成员中。如果不是这种情况,您可以将某种 .hidden
class 添加到第 n 个 <label>
,其中 n 是您当前正在迭代的选择。如果是这样,您可以删除 class。您可以使用以下 jQuery 函数来做到这一点(假设 i
是保存当前元素索引的变量):
$("label:nth-child(" + i + ")").addClass("hidden");
和
$("label:nth-child(" + i + ")").removeClass("hidden");
.hidden
-class 应该是这样的:
.hidden {
display:none;
}
希望对您有所帮助。如果您有任何问题,请随时提出。
您可以使用这个 JavaScript/JQuery 函数:
function updateCheckboxes(x) {
if ($('#SearchBar').val() == '') {
$('#checkboxes > label').show();
} else {
$('#checkboxes > label').hide();
$('#checkboxes > label:contains('+$('#SearchBar').val()+')').show();
}
}
并在输入中调用它 oninput
,使用以下行:
<input id="SearchBar" placeholder="Search for options.." type="text" oninput="updateCheckboxes(this)" autocomplete="off">
并在 head/body 的 bottom/top 处包含 JQuery;
<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>
编辑: 使搜索不区分大小写,添加这个惊人的 JQuery,发现 here.
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});