0

我正在对 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();
4

2 回答 2

0

我建议使用data-属性并使用属性包含选择器。例如。

<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');
});

在这里拉小提琴。

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

$("li:contains('" + $('#q').val() + "')").css('color', 'red');
于 2013-06-22T10:49:07.093 回答
0

它会是这样的：

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

上面的语句将匹配<a>包含您的搜索词的任何元素，该元素位于带有 id 的 div 内#airport-c" + countryId + "-"

请参阅工作演示。

于 2013-06-22T10:52:11.997 回答