javascript - 如何让 jQuery 实时搜索在 javascript 数组中更准确？

Question

我想使用 jQuery AJAX 和 PHP 进行实时搜索，并使用一个输入文本框作为数据过滤器。所以在后台我有这样的 JSON 数据:

[
    ["1","Your Name 1","button_field"],
    ["2","Your Name 2","button_field"],
    ["3","Your Name 3","button_field"]
]

这是我的 jQuery 代码，用于当用户开始在文本框中键入内容时进行实时搜索:

$('input[name="search_value"]').on('keydown', function() {
    $.ajax({
        url: 'http://localhost/myapp/ajax/get',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            var search = $('input[name="search_value"]').val();
            var output = '';

            for (i = 0; i < data.length; i++) {
                if (($.inArray(search, data[i]) !== -1) || (search === '')) {
                    output += '<tr>';

                    for (j = 0; j < data[i].length; j++) {
                        output += '<td>' + data[i][j] + '</td>';
                    }

                    output += '</tr>';
                }
            }

            $('.table-data > table > tbody').html(output);
        }
    });
});

我尝试通过输入Your Name 2来使用搜索，结果成功了。但是当我尝试输入 your name 2 (每个第一个单词都没有大写)并尝试输入 our name 2 (缺少 y) ，结果未显示。

我的问题是:如何使搜索结果忽略大写(使大小写不敏感)并开始显示数据，即使搜索值不完整？感谢您的所有回答:)

Answer 1

听起来您想要一个不区分大小写的子字符串匹配。如果是这样，那么 $.inArray 不是正确的工具。

我会使用Array#some来实现这一点。首先，我将修改获取 search 的行以将其变为小写:

var search = $('input[name="search_value"]').val().toLowerCase();

然后当您检查 data[i] 是否包含它时:

if (!search || data[i].some(function(entry) { return entry.toLowerCase().indexOf(search) != -1; })) {

Array#some 为数组中的每个条目调用一次您提供的回调，直到回调返回一个真值(在这种情况下它会停止)。如果回调返回真值，some 返回 true；如果它遍历整个数组而没有发生这种情况，则返回 false。

由于箭头函数和 String#includes，这在 ES2015 中看起来更好一些:

if (!search || data[i].some(entry => entry.toLowerCase().includes(search))) {

实例:

$('input[name="search_value"]').on('input', function() {
  // setTimeout to simulate ajax
  setTimeout(function() {
    var data = [
      ["1","Your Name 1","button_field"],
      ["2","Your Name 2","button_field"],
      ["3","Your Name 3","button_field"]
    ];
    var search = $('input[name="search_value"]').val().toLowerCase();
    var output = '';

    for (var i = 0; i < data.length; i++) {
      if (!search || data[i].some(function(entry) { return entry.toLowerCase().indexOf(search) != -1; })) {
        output += '<tr>';

        for (j = 0; j < data[i].length; j++) {
          output += '<td>' + data[i][j] + '</td>';
        }

        output += '</tr>';
      }
    }

    $('.table-data > table > tbody').html(output);
  });
});

<input type="text" name="search_value">
<div class="table-data">
  <table>
    <tbody>
    </tbody>
  </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

另外两个注释，都修复了上面的示例:

• 我会使用 input，而不是 keydown，这样您就可以响应所有输入(包括粘贴)
• 您的代码正在陷入隐式全局变量的恐怖。 声明您的变量(在本例中为i)。 :-)

<小时/>

1 这是我贫血的小博客上的一篇文章。