在 html Javascript 中搜索答案

【问题标题】：Search in html Javascript在 html Javascript 中搜索
【发布时间】：2009-02-22 12:06:06
【问题描述】：

我有下面的 HTML 代码，还有一个用于输入关键字的文本框，我想要的是，当用户在此文本框中编写使用 FirstName 和 LastName 在此 HTML 代码中的 javascript 搜索时，并且在比较项目时，如果项目不匹配，我想 display: none 它的容器 div。如何使用 JS 并在 firefox 和 IE 上工作

<div id="contact_4">
    <input class="contactChk" id="chk_4" type="checkbox" />
    <img alt="" src='img/4.jpg' width="25px" height="25px" />
    <span id="contactName_4" class="contactItem">
        FirstName LastName
    </span>
    <br />
</div>
<div id="contact_5">
    <input class="contactChk" id="chk_5" type="checkbox" />
    <img alt="" src='img/5.jpg' width="25px" height="25px" />
    <span id="contactName_5" class="contactItem">
        ACharName AnyLast
    </span>
    <br />
</div>
<div id="contact_6">
    <input class="contactChk" id="chk_6" type="checkbox" />
    <img alt="" src='img/6.jpg' width="25px" height="25px" />
    <span id="contactName_6" class="contactItem">
        BCharName AnyLast
    </span>
    <br />
</div>
<div id="contact_7">
    <input class="contactChk" id="chk_7" type="checkbox" />
    <img alt="" src='img/7.jpg' width="25px" height="25px" />
    <span id="contactName_7" class="contactItem">
        CCharName AnyLast
    </span>
    <br />
</div>

【问题讨论】：

我找到了这篇文章，它确实解决了我的问题，并且比我尝试过的所有其他解决方案都快：jQuery Inline Search Plugin

标签： javascript jquery html xhtml

【解决方案1】：

如果您要显示更多的联系人，这看起来效率很低。最简单的方法是使用jQuery 并将函数绑定到文本字段的keyup 事件：（假设上面的代码包含在<div id="contactlist"> 之类的内容中）


var searchstring = "";

function filterContact() {
  var jthis = $(this); // should give a tiny performance gain
  if ($('span.contactItem', this).text().toLowerCase().indexOf(searchstring) >= 0) {
    jthis.addClass('matching');
    jthis.removeClass('nonmatching');
  } else {
    jthis.addClass('nonmatching');
    jthis.removeClass('matching');
  }
}

function filterContacts() {
  var elem = $('input#yourtextfield')[0];
  searchstring = elem.value.toLowerCase(); // because we like to match all cases
  searchstring = searchstring.replace(/^\s+/,'').replace(/\s+$/,''); // trim

  $('#contactlist div').each(filterContact);
}

function initFiltering() {
  $('input#yourtextfield').live('keyup',filterContacts);
}

$(document).ready(initFiltering);

还将.matching 和.nonmatching 类添加到您的CSS。（display: block 和 none）

如上所述，这非常低效，不仅取决于所需的内存（和带宽），还取决于过滤时的 CPU 时间（加上渲染时间）。如果您在某个数组中处理该数据，或者如果您有非常大的数据集，您应该按需从服务器获取分页的过滤数据（也可以通过 jQuery 的 AJAX 函数完成），它可能会更快。如果用户仍在输入，您还可以延迟过滤（仅在他停止输入约 500 毫秒时过滤）。

toLowerCase() 在非 ASCII 输入时可能会遇到一些困难；所以如果你需要它，你应该在你的目标语言上测试它。

【讨论】：

检查我的答案，它对我的帮助更大，而且效果很好stackoverflow.com/questions/574816/search-in-html-javascript/…

【解决方案2】：

这可能对你有帮助：

javascript

<script language="javascript">
    function go() {
        elem = document.getElementById("thesearch");
        for (var x = 4; x <= 7; x++) {
            if (((document.getElementById('contactName_' + x).innerHTML).toUpperCase()).indexOf((elem.value).toUpperCase()) > -1)
                document.getElementById('contact_' + x).style.display = "";
            else
                document.getElementById('contact_' + x).style.display = "none";
        }

    }
</script>

HTML

<input type="text" value="" id="thesearch" onkeyup="go();" />

请注意，在我的示例中，要检查的 div 数量是固定且静态的。这应该改进，但这个例子在 IE6 / FF3 中工作。

希望这能有所帮助。

编辑：哦，是的，toUpperCase() 可以删除，如果你想要区分大小写的东西

【讨论】：