在html Javascript中搜索

Question

我有下面的html代码,我也将有一个用于输入关键字的文本框,我想要的是当用户在此文本框中使用FirstName和LastName在此html代码中搜索javascript时,以及在比较项目时,如果是项目不匹配我想显示:没有它的容器div.我怎样才能使用JS并在firfox和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>

Answer 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);

还要为CSS 添加.matching和.nonmatching类.(display: block和none)

如上所述,这非常低效,不仅需要内存(和带宽),还需要CPU过滤时间(加上渲染时间).如果您在某个数组中处理该数据可能会更快,或者如果您有非常大的数据集,您应该获取从服务器按需分页的过滤数据(也可以通过jQuery的AJAX函数完成).您还可以在用户仍在键入的情况下过滤延迟(仅当他停止键入~500ms时才进行过滤).

toLowerCase()非ASCII输入会有一些困难; 因此,如果您需要它,您应该使用目标语言进行测试.