Question

我正在尝试编写一个可以使用逻辑运算符来过滤结果的搜索功能。代码的工作方式是我可以键入要搜索的字符串，或者我可以将＆lt;或者>在文本字段的开头，过滤更大或更小的数值。我正在寻找更好的版本或编写方式。我有一个（半）工作版本，但是我写它的方式如果值不超过三位，我必须放一两个零。例如，必须使用＆lt; 050来搜索50以下的项目。使用＆lt; 50本身会产生错误的结果。此外，如果结果低于100，我必须将值从5转换为005.仅当最大值低于1k时才有效。否则我必须转换为0005.

function FullListSearch() { 
  $("#InfoSearch").keyup(function() {
    var V = this.value;
    var value = this.value.toLowerCase();
    Operator = value[0];
    len = $(this).val().length;

    if ( Operator == ">" ) { 
      $("#Info").find(".fulllist").each(function() {
         var ths = $(this).text();
         var Npattern = /[0-9]+/g;
         var Nmatches = ths.match(Npattern);
         var ValN = V.match(Npattern);
     if (Nmatches.length > "1") {
       if (Nmatches[1].length == "1") { Nmatches[1] = "00" + Nmatches[1] };
          $(this).show();
       if (Nmatches[1] < ValN) {
              $(this).toggle();
       }
     }
     else { alert("the > operator is not valid with this object");
             return false;
          }
    });
  }

  else if ( Operator == "<" ) { 
    $("#Info").find(".fulllist").each(function() {
     var ths = $(this).text();
     var Npattern = /[0-9]+/g;
     var Nmatches = ths.match(Npattern);
     var ValN = V.match(Npattern);
      if (Nmatches.length > "1") {
        if (Nmatches[1].length == "1") { Nmatches[1] = "00" + Nmatches[1] };
        $(this).show();
        if (Nmatches[1] > ValN) {
            $(this).toggle();
      }
     }
     else { alert("the > operator is not valid with this object");
             return false;
     }
    });
  }

  else { 
    $("#Info").find(".fulllist").each(function() {
      var id = $(this).first().text().toLowerCase()
          $(this).toggle(id.indexOf(value) !== -1);
    });
    }
  });
}

Answer 1

我会使用类似的东西：

function FullListSearch() {
    $("#InfoSearch").keyup(function () {
        var V = this.value;
        var value = this.value.toLowerCase();
        var Operator = value[0];

        var compFunc = function (a, b) {
            return a == b;
        };

        if (Operator == '>' || Operator == '<') {
            value = value.substring(1);

            if (Operator == '>') compFunc = function (a, b) {
                return a > b;
            };
            else // '<' 
            compFunc = function (a, b) {
                return a < b;
            };
        }
        var numVal = parseInt(value);
        if (isNaN(numVal)) alert("invalid input!");

        $("#Info").find(".fulllist").each(function () {
            var val = parseInt($(this).text());
            $(this)[compFunc(val, numVal) ? "show" : "hide"]();
        });
    });
}

我没有检查过这个，但这个想法应该是明确的。

很少注意到：

正则表达式并不总是验证的最佳方式，如果是这样，请使用更通用的内容，例如/^[><]?\d+$/来验证整个内容。
为什么比较每个数字，何时可以比较数字？使用parseInt()。

我不会在每个键盘上触发这整个代码，但是等一段时间才能看到是否按下了新键。类似的东西：

 $("#InfoSearch").keyup(function () {
      var timeout = $(this).data("timeout");
      if (timeout) clearTimeout(timeout);
      $(this).data("timeout", setTimeout(function () {...........}, 200); // milliseconds
 }

Answer 2

这是我的工作解决方案。感谢EZSlaver建议我将我的int存储在属性中，并建议我不使用正则表达式进行验证。

function FullListSearch() {
  $("#InfoSearch").keyup(function() {
  var V = parseInt(this.value);
      var value = this.value.toLowerCase();
  Operator = $('select option:selected').val();

   $("#Info").find(".fulllist").each(function() {
     $(this).show();
     var NumVal = $(this).attr('time');
     if ( (Operator == 'greater') && (NumVal < V)) {
      $(this).hide();
     }
     if ( (Operator == 'lesser') && (NumVal > V)) {
      $(this).hide();
    }
     if (Operator == "equal") {
       var id = $(this).first().text().toLowerCase()
       $(this).toggle(id.indexOf(value) !== -1);
     }
   });
  });   
}

使用可选的逻辑运算符进行即时搜索以过滤结果

2 个答案: