在html中搜索Javascript


1

我有以下的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> 
  0

我发现这篇文章,它确实解决了我的问题,它比所有其他解决方案,我想快:jQuery的内嵌式搜索插件](http://vision-media.ca/resources/jquery/jquery-inline-search-plugin) 24 5月. 092009-05-24 10:51:00

5

这看起来非常低效的,如果你有一个更大组联系人的显示。最简单的方法是使用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: blocknone

如上所述,这不仅需要内存(和带宽),而且还需要CPU过滤时间(以及渲染时间)。如果你在某个数组内部处理数据,或者如果你有非常大的数据集,你应该从服务器按需提取分页的过滤数据(也可以通过jQuery的AJAX函数完成),这可能会更快。如果用户仍在键入,您也可以过滤延迟(只有在他停止输入约500毫秒时才进行过滤)。

toLowerCase()对于非ASCII输入可能会有一些困难;所以如果你需要它,你应该测试你的目标语言。

  0

检查我的答案它帮助我更多,工作完美http://stackoverflow.com/questions/574816/search-在-HTML的JavaScript/903517#903517 24 5月. 092009-05-24 10:52:18


1

这可能会帮助您:

的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> 
</head> 
<body> 

HTML:

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

注div来检查的数量是固定的,在我为例静态的。这应该改进,但是这个例子在IE6/FF3中工作。

希望这可以帮助。

编辑:噢,结果与toUpperCase()可以删除,如果你想要的东西区分大小写