Поиск в HTML Javascript

Question

У меня есть HTML-код ниже, также у меня будет текстовое поле для ввода ключевого слова, Я хочу, чтобы пользователь писал в этом текстовом поле поиск javascript в этом HTML-коде, используя FirstName и LastName, и при сравнении элементов, если элемент не совпадает, я хочу отобразить: ни один его контейнерный 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);

Также добавьте классы .matching и .nonmatching в ваш CSS. (display: block и none)

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

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

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

HTML:

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

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

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

Редактировать: о да, toUpperCase () можно удалить, если вы хотите что-то чувствительное к регистру