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调用为数组中的每个条目提供一次的回调，直到回调返回一个truthy值（在这种情况下它停止）。如果回调函数返回真值，则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）。： - ）

¹那是我贫血的小博客上的帖子。

如何让jQuery数组中的jQuery实时搜索更准确？

1 个答案: