Question

我有一个小部件（下面链接的笔中的小部件代码不是实际代码，请注意过滤功能jQuery.fn.doFilterOptions(){..}）。

使用案例

我有一个非原生的选择框。我需要扩展其功能以接受onclick事件，该事件允许用户在选择框中键入数据（不是针对传统的<select>），它应该通过简单地显示来过滤.options或者根据其内部HTML值隐藏它们，如果在循环通过用户输入的字符串期间的任何点找不到匹配，我需要继续不显示选项。

问题：

现在它的工作方式是95％，唯一的问题是如果找到一个无效的char，循环会继续按char检查其余的用户条目char，如果下一个char匹配任何一个在同一索引中的选项，它将其重新显示为有效的.option。

$('.selectbox .selected').on('keyup', function(){
  var theseOptions = $(this).parent('.selectbox').find('.option');
  var defaultPlaceholder = $(this).data('placeholder');

  var filterOptions = (function(curSelectedVal){
    if (curSelectedVal === ' ' || curSelectedVal.length === 0 || curSelectedVal === defaultPlaceholder){
      theseOptions.show();
    }
    var optionsVal; 
    var doInputOptionsComparison = (function(){
       var invalidOption = false;
      for (var letterPos = 0; letterPos < curSelectedVal.length; letterPos++){
        theseOptions.each(function(optionIteration){ 

          var thisOption = $(this);
          thisOptionsVal = thisOption.html();

          if (curSelectedVal.length > thisOptionsVal.length ){ // If a longer string has been input by the user than exists in the option being iterated over, hide this option
            thisOption.hide();
            invalidOption = true;
          }
          else if ((thisOptionsVal[letterPos].toLowerCase().trim() === curSelectedVal[letterPos].toLowerCase().trim()) && invalidOption === false){ // If the input string matches this option and no invalid options have been found in the letterPos prior to it, show this option 
            thisOption.show();
          }
          else { // If the string does not match any option
            invalidOptionFound = true;
            thisOption.hide();
          }

        });
      }
    })();
  })($(this).html());
});

这是演示，尝试选择然后键入abz，您将看到过滤器正常工作。

现在擦除输入数据，现在输入azc。您将看到abc选项再次可用，因为c匹配相同的索引（用户输入[i] = optionsHtml [i] = show（）;），导致上述不良影响。

http://codepen.io/nicholasabrams/pen/KwwMPG?editors=001

奖金：

使用regEx进行过滤会更容易吗？

Answer 1

我设法使用动态的regEx过滤器功能，它将代码缩减了很长时间！哇什么是更好的解决方案。

$.fn.filterOptionsByUserInput = function(optionSelector){
        var curInput = $(this).html().trim().replace(/&nbsp;/g, '').toLowerCase();

        $(optionSelector).each(function(optionIndex){
            var userInputRegEx = new RegExp('^'+curInput+'.*');
            if ($(this).html().toLowerCase().trim().match(userInputRegEx)){
                $(this).fadeIn('slow');
            }
            else {
                $(this).fadeOut('slow');
            }
        });
    };

http://codepen.io/nicholasabrams/pen/LEEwrm?editors=001

通过读取for循环内的字符长度来过滤选项

1 个答案: