Искать в html Javascript

У меня есть html-код ниже, также у меня будет текстовое поле для ввода ключевого слова, Что мне нужно, так как пользователь, записывающий в этом текстовом поле JavaScript-поиск в этом html-коде с использованием FirstName и LastName, и при сравнении элементов, если элемент не соответствует, я хочу отобразить: none его контейнер div. Как я могу сделать это с помощью JS и работать на FIRFOX и IEИскать в html Javascript

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

источник

2009-02-22 Amr Elgarhy

Я нашел эту статью, которая на самом деле решить мою проблему и ее быстрее, чем все другие решения я попробовал: [JQuery линейный поиск Плагин] (http://vision-media.ca/resources/jquery/jquery-inline-search-plugin) –

Это выглядит очень неэффективно, если у вас есть больший набор контактов, которые будут отображаться. Проще всего было бы использовать 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)

Как уже говорилось, это довольно неэффективно, не только требуемая память (и полоса пропускания), но и время процессора при фильтрации (плюс время рендеринга). Это может быть быстрее, если вы обрабатываете эти данные внутри какого-либо массива или, если у вас очень большие наборы данных, вы должны получать отфильтрованные данные, разбитые на страницы с сервера по запросу (также могут выполняться функциями AJAX jQuery). Вы также можете отфильтровать задержку в случае, если пользователь все еще печатает (отфильтруйте, только если он перестал печатать на ~ 500 мс).

toLowerCase() может иметь некоторые трудности с не-ASCII-входом; поэтому, если вам это нужно, вы должны протестировать его на своих целевых языках.

источник

2009-02-22 13:07:17 Energiequant

Проверьте мой ответ, он помог мне больше и отлично работал http://stackoverflow.com/questions/574816/search- в-HTML-JavaScript/903517 # 903517 –

это может помочь вам:

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();" />

Обратите внимание на количество дел до проверки фиксируется и статические в моем Exemple. Это должно быть улучшено, но это пример работы в IE6/FF3.

Надеюсь, это поможет.

Edit: Ах да, toUpperCase() может быть удален, если вы хотите что-то случай, чувствительный

источник

2009-02-23 14:58:16 RVeur23

Искать в html Javascript

ответ

Смежные вопросы