Question

我有超过2000个数据的html表也有现场javascript搜索此html搜索的代码。当我在文本框中输入第一个字符时javascript开始搜索，如果字符达到三个我想要的我想要的执行搜索功能，如果角色低于三个没有搜索功能。下面是我的javascript代码，任何人都可以指导我如何做。谢谢

javascript

<script type="text/javascript">

function searchRows(CPH_GridView1) {
var tbl = document.getElementById(CPH_GridView1);
var headRow = tbl.rows[0];
var arrayOfHTxt = new Array();
var arrayOfHtxtCellIndex = new Array();

for (var v = 0; v < headRow.cells.length; v++) {
 if (headRow.cells[v].getElementsByTagName('input')[0]) {
 var Htxtbox = headRow.cells[v].getElementsByTagName('input')[0];
  if (Htxtbox.value.replace(/^\s+|\s+$/g, '') != '') {
    arrayOfHTxt.push(Htxtbox.value.replace(/^\s+|\s+$/g, ''));
    arrayOfHtxtCellIndex.push(v);
  }
 }
}

for (var i = 1; i < tbl.rows.length; i++) {

    tbl.rows[i].style.display = 'table-row';

    for (var v = 0; v < arrayOfHTxt.length; v++) {

        var CurCell = tbl.rows[i].cells[arrayOfHtxtCellIndex[v]];

        var CurCont = CurCell.innerHTML.replace(/<[^>]+>/g, "");

        var reg = new RegExp(arrayOfHTxt[v] + ".*", "i");

        if (CurCont.match(reg) == null) {

            tbl.rows[i].style.display = 'none';

       }

    }

  }
}
</script>

Answer 1

为了满足您的要求，我做了一些更改。请用我的代码替换您的代码。

您的代码：

if (Htxtbox.value.replace(/^\s+|\s+$/g, '') != '') {
 arrayOfHTxt.push(Htxtbox.value.replace(/^\s+|\s+$/g, ''));
 arrayOfHtxtCellIndex.push(v);
}

我的代码：

var content = Htxtbox.value.replace(/^\s+|\s+$/g, ''); 
if (content != '' && content.length >= 3) {
 arrayOfHTxt.push(Htxtbox.value.replace(/^\s+|\s+$/g, ''));
 arrayOfHtxtCellIndex.push(v);
}

Answer 2

在for周期开始时验证您的输入：

var keyword = headRow.cells[v].getElementsByTagName('input')[0];
if(keyword===undefined || keyword.length < 3) {
    return false;
}

此外，您可以稍后在代码中使用已定义的keyword变量，以提高可读性。

以下是一个工作示例：http://jsfiddle.net/L99wM/1/

Answer 3

您可以尝试使用jquery中的keyup函数

jQuery (element).keyup (function () {
if (jQuery (this).length > 3) {
//call search method here.
}
});

Answer 4

简洁地说：

<input name="Field1" value="" type="text" onkeyup="if(this.value.length>2) {searchFor(this.value)}">

然后有一个功能：

searchFor(val) {
 // code to search for something here
}

或者更优雅（所以你在一个地方定义了检查功能）：

<input name="Field1" value="" type="text"  onkeyup="checkFld(this)">

然后有脚本功能.. function checkFld（fld）{ var val = fld.value; if（val.length＆lt; 3）{return} 警报（“搜索”+ val） //搜索代码到这里 }

在输入时达到3个字符时执行基于javascript的搜索

4 个答案: