带下划线的搜索值

时间:2018-06-29 05:39:25

标签: javascript jquery

如果我在搜索输入字段中输入A_ _ l _ e,则Apple会作为我的Array的结果出现。

$(document).ready(function() {
  var fruitsArray = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];
  $.each(fruitsArray, function(index, value) {
  $("#result").append(index + ": " + value + '<br>');
});

搜索

$("[name='username']").keyup(function() {
   words = $(this).val();
   //   alert(words.length);
   $('#result').text(username);
});
});

在这里,我使用jquery在html中显示数组

html

<body>
    <input type="text" name="username" />
    <div id="result"></div>  
</body>

2 个答案:

答案 0 :(得分:0)

您可以将_的每个实例替换为.(正则表达式中的单字符通配符),并针对生成的正则表达式进行测试:

new RegExp(pattern.replace(/_/g, ".")).test(string)

$(function(){
  let fruitsArray = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];
  let re = new RegExp("A__le".replace(/_/g, "."));
  
  $.each(fruitsArray, function(index, value){
    if (re.test(value)) {
       $("#result").append(index + ": " + value + "<br>");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

答案 1 :(得分:0)

这是一个例子。

input keyup事件触发时,检查fruitsArray匹配项并显示匹配项。

Regular Expression的创建方式是将任何单个字符替换为_.

$(document).ready(function() {
    var fruitsArray = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];
    $.each(fruitsArray, function(index, value) {
        $("#result").append(index + ": " + value + '<br>');
    });

    $("[name='username']").keyup(function() {
        var words = $(this).val().replace(/_/g, '.');
        try{
          var reg = new RegExp('^'+words.toLowerCase()+'$');
          $("#result").html('');
          $.each(fruitsArray, function(index, value) {
              if(reg.test(value.toLowerCase()))
                $("#result").append(index + ": " + value + '<br>');
          });
        }
        catch(e){
          // regular expression error
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="username" />
<div id="result"></div>

更新

添加开头和结尾