Question

我正在对div中的可见元素（属于某个国家/地区的机场）实施基于击键的搜索。换句话说，在每个按键事件中，我隐藏了文本中没有匹配短语（不区分大小写）的所有元素。

还有一个问题，搜索只能在与国家/地区ID匹配的元素上进行。

html（C＃Razor）是：

<div class="airport" id="airport-c@(airport.CountryId)-" name="airport-a@(airport.AirportId)-">
  <a ...etc>
    @airport.Airport <span class="airport-country">@airport.Country</span>
  </a>
</div>

我有这个javascript来隐藏与国家/地区ID不匹配的元素，但是我需要扩展它以包含搜索匹配，我不知道如何实现这一点。

$('[id^="airport-c"][id!="airport-c' + countryId + '-"]').hide();

Answer 1

我建议使用data-属性并使用Attribute Contains Selector。例如。

<p>
    <input type="text" id="q"/>
</p>
<ul>
    <li data-name="one">One</li>
    <li data-name="two">Two</li>
    <li data-name="three">Three</li>
    <li data-name="four">Four</li>
</ul>

$('#q').on('keyup', function(){
  $('li[data-name*="' + $('#q').val() + '"]').css('color', 'red');
});

Fiddle here

或者，如果您不能/不想更改标记，则可以使用包含选择器。

$("li:contains('" + $('#q').val() + "')").css('color', 'red');

Answer 2

这将是这样的：

$("a:contains('"+your_search_term+"')", "#airport-c" + countryId + "-");

上述语句将匹配包含您的搜索字词的任何<a>元素，该元素位于ID为#airport-c" + countryId + "-"的div中

请参阅working demo。

Jquery搜索匹配元素

2 个答案: