Question

我有一个从mvc模型生成的表。每个国家/地区都有ID，名称和资金。表中的所有元素都将其可见性设置为隐藏。

＆＃13;

<table id="countryTable"> 
for (int i = 0; i < Model.Countries.Count; i++)
    {
      <tr id="@Model.Countries[i].id" style="visibility: hidden">
        <td>@Model.Countries[i].Name</td>
        <td>@Model.Countries[i].Capital</td>
      </tr>
    }
</table>

＆＃13;

我有一个自动完成功能，我一直试图让自动完成的结果使相应的行再次可见。所以，如果我搜索＃34;美国＆＃34;将出现美国的行。

$(function () {

    var countries = [];
    @foreach (var country in Model.Countries)
    {
        ... Assign to the array
    }

    $('#autocomplete').autocomplete({
        search: function (event, ui) {
            $('#countryTable').empty();
            var countryId = ui.item.value;
            document.getElementById(countryId).style.visibility = 'hidden';
        },
        source: countries,
        select: function (event, ui) {
            var countryId = ui.item.value;
            document.getElementById("" + countryId + "").style.visibility = 'visible';
        }
    })
});

<input type="text" id="autocomplete">

目前我得到的错误是＆＃34;无法读取属性＆＃39; style＆＃39; of null＆＃34;。我不认为自动完成能够找到元素，但ID是唯一的。我甚至不确定这是否是一个好方法，所以任何帮助将不胜感激。感谢

Answer 1

我终于得到了MVC表来显示自动完成的结果。所以我想为我的问题给出答案。我决定让所有行都可见，当你搜索国家时，如果一个国家不是自动完成结果的一部分，它就会被隐藏。然后，如果你没有搜索任何国家，那么就会显示出来。

显示国家/地区的表格没有太多变化，只删除了样式并在每行中添加了一个类名称。

＆＃13;

<table id="countryTable"> 
for (int i = 0; i < Model.Countries.Count; i++)
    {
      <tr id="@Model.Countries[i].id" class"countryRow">
        <td>@Model.Countries[i].Name</td>
        <td>@Model.Countries[i].Capital</td>
      </tr>
    }
</table>

＆＃13;

自动完成功能已更改。

＆＃13;

$('#autocomplete').autocomplete({
  search: function (event, ui) {

    var countryToSearch = event.delegateTarget.value.toLowerCase();

    countries.filter(function (value) {
      for (var i = 0; i < countries.length; i++) {

        if (countries[i].Name.toLowerCase().indexOf(countryToSearch) <= -1) {
          $('#' + countries[i].value).hide();
        } else {
          $('#' + countries[i].value).show();
        }
      }
    });
  },
  source: countries
})
});

＆＃13;

自动完成使MVC表结果可见

1 个答案: