[英]How can I make my search form work with uppercase and lowercase
I want my search form to work with uppercase and lowercase. 我希望我的搜索表单可以使用大写和小写字母。 So whenever I input something that's lowercase it will also show me te uppercase results in the table I'm searching in.
因此,每当我输入小写字母时,它也会在要搜索的表中向我显示大写结果。
Here's my javascript 这是我的JavaScript
function searchFunction() {
var searchText = document.getElementById('database_search_bar').value;
var targetTable = document.getElementById('database_table');
var targetTableColCount;
for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
var rowData = '';
if (rowIndex == 0) {
targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
continue;
}
for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
rowData += targetTable.rows.item(rowIndex).cells.item(colIndex).textContent;
}
if (rowData.indexOf(searchText) == -1)
targetTable.rows.item(rowIndex).style.display = 'none';
else
targetTable.rows.item(rowIndex).style.display = 'table-row';
}
Can anyone help me with this? 谁能帮我这个?
Change this line: 更改此行:
if (rowData.indexOf(searchText) == -1)
to: 至:
if (rowData.toLowerCase().indexOf(searchText.toLowerCase()) == -1)
This way, for comparison, you will be using lower case strings only. 这样,为了进行比较,您将仅使用小写字符串。 Ie if
searchText
was "Lorem Ipsum" and rowData
was "I HAVE LOREM IPSUM WITHIN", they'll become "lorem ipsum" and "i have lorem ipsum within" respectively - thus, they'll match. 即,如果
searchText
是“ Lorem ipum”,而rowData
是“ I LOVE IPSUM WITHIN”,它们将分别变为“ lorem ipsum”和“我内部有lorem ipsum”-因此,它们将匹配。
String.prototype.toLowerCase()
reference. String.prototype.toLowerCase()
引用。
Also note that in ES6 you have String.prototype.includes()
that might be used for what you're doing. 还要注意,在ES6中,您可以使用
String.prototype.includes()
进行操作。 It'll read a bit better - however it's not supported in IE at the moment. 它会读得更好-但是IE目前不支持它。
If you want to ignore case, may be you should make both side to be upper case or lower case. 如果您想忽略大小写,可能您应该将双方设为大写或小写。
In your case, you can use toUpperCase()
or toLowerCase()
on rowData
and searchText
. 就您而言,可以在
rowData
和searchText
上使用toUpperCase()
或toLowerCase()
。
var upperData = rowData.toUppercase();
var upperText = searchText.toUppercase();
if (upperData.indexOf(upperText) == -1) {
//Not Found
}
else {
//Found
}
This is an alternative: 这是一种替代方法:
The trick is homogenize the comparison. 诀窍是使比较均匀。
How to do this homogenization? 如何进行均质化?
A
is different to a
. A
与a
不同。 So, we may lowercase all or uppercase all. toLowerCase()
or toUpperCase()()
methods. toLowerCase()
或toUpperCase()()
方法。 I created a notFound()
that lowercase rowData
and searchText
and then returns false
if the indexOf is -1
otherwise will return true
. 我创建了一个
notFound()
小写的rowData
和searchText
,然后如果indexOf为-1
则返回false
,否则将返回true
。 Sorry, It took me long time to fill the table with countries and continents. 抱歉,我花了很长时间才把国家和大洲塞满了桌子。
var searchButton = document.getElementById('search_button'); searchButton.addEventListener('click', searchFunction) function searchFunction() { var searchText = document.getElementById('database_search_bar').value; var targetTable = document.getElementById('database_table'); var notFoundText = document.getElementById('not_found'); var targetTableColCount; var hasResult = false; notFoundText.innerHTML = ''; for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) { var rowData = ''; if (rowIndex == 0) { targetTableColCount = targetTable.rows.item(rowIndex).cells.length; continue; } for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) { rowData += targetTable.rows.item(rowIndex).cells.item(colIndex).textContent; } if (notFound(rowData, searchText)) { targetTable.rows.item(rowIndex).style.display = 'none'; } else { targetTable.rows.item(rowIndex).style.display = 'table-row'; hasResult = true; } } if (!hasResult){ notFoundText.innerHTML = 'There are no results.'; } } function notFound(rowData, searchText){ return rowData.toLowerCase().indexOf(searchText.toLowerCase()) === -1; }
table td { width: 150px; }
Search Text: <input id="database_search_bar" type="text" name="fname"><input id="search_button" type="submit" value="Search"> <p></p> <table id="database_table" > <tr> <th>Country</th> <th>Continent</th> </tr> <tr> <td>Brazil</td> <td>South America</td> </tr> <tr> <td>Jordan</td> <td>Asia</td> </tr> <tr> <td>Mauritania</td> <td>Africa</td> </tr> <tr> <td>United States of America</td> <td>North America</td> </tr> <tr> <td>Netherlands</td> <td>Europe</td> </tr> <tr> <td>Oman</td> <td>Asia</td> </tr> <tr> <td>Honduras</td> <td>South America</td> </tr> <tr> <td>Lithuania</td> <td>Europe</td> </tr> </table> <div id="not_found" ></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.