在html Javascript中搜索

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输入会有一些困难; 因此,如果您需要它,您应该使用目标语言进行测试.

如果要显示更多的联系人,这看起来效率很低.最简单的方法是使用jQuery并将函数绑定到文本字段的keyup事件:(假设上面的代码包含在类似的内容中

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