javascript - jQuery 从第一列输入值开始搜索

Question

我有一个非常简单的动态表搜索脚本

我想弄清楚的是，如何让它从值的开头开始搜索？

例如。我只希望它在搜索 lo 或 lon 时显示其中包含单词 london 的行，目前如果您输入 on 或 ondon，它将返回 true。

还有这个例子，我如何强制它只搜索每行的第一列？

$(document).ready(function() {
  
  $('#search input').keyup(function() {
  	var text = $(this).val();
    if (text != null) {
    	$('table tbody tr').hide();
      $('table tbody tr').filter(':contains("' + text + '")').show();
    }
  });
  

});

th {
  cursor: pointer;
  text-align: left;
}

td {
  width: 100px;
}

input[type="text"] {
  padding: 10px 5px;
  margin: 25px 0;
  font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search">
  <input type="text" placeholder="search somethingn" />
</div>

<table id="items">
  <thead>
    <th>item</th>
    <th>something else</th>
  </thead>
  <tbody>
    <tr>
      <td>london</td>
      <td>test</td>
    </tr>
    <tr>
      <td>new york</td>
      <td>test 2</td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/8p4w62pe/

Answer 1

没有内置的 startsWith 选择器，但您可以编写自己的:

 $.extend($.expr[":"], {
   "startsWith": function(elem, i, data, set) {
       var text = $.trim($(elem).text()),term = data[3];
       return text.indexOf(term) === 0;
   },
 });

您还需要更改选择器以选择 td(而不是 tr)。要仅选择第一个 td，请将 :first-child 添加到选择器。然后更改 show() 以使用 parent() 应用于父级:

$('table tbody tr td:first-child').filter(':startsWith("' + text + '")').parent().show();

完整代码:

$(document).ready(function() {
  $.extend($.expr[":"], {
    "startsWith": function(elem, i, data, set) {
        var text = $.trim($(elem).text()),term = data[3];
        return text.indexOf(term) === 0;
    },
  });

  $('#search input').keyup(function() {
    var text = $(this).val();
    if (text != null) {
       $('table tbody tr').hide();
       $('table tbody tr td:first-child').filter(':startsWith("' + text + '")').parent().show();
    }
  });
});

Working JS Fiddle