Как отобразить результаты поиска onkeyup? - PullRequest
Новая
       7

Как отобразить результаты поиска onkeyup?

0 голосов
/ 23 мая 2011

У меня есть окно поиска, которое по мере того, как пользователь вводит буквы в поле поиска, мы будем фильтровать и отображать результаты. Однако, когда пользователь вводит каждую букву, результаты поиска переключаются между отображением и скрытием. Я очень плохо знаком с JS, поэтому надеюсь, что это легко исправить.

Вот мой HTML: 

See Below

Вот мой переключатель JS: 

See Below

Как я могу настроить JS, чтобы не переключаться вперед и назад?

// Вот мои правки, чтобы помочь ответить на вопрос. Это JS и HTML, которые я использую для отображения результатов:

HTML: 

<div class="friendssearch" onclick="toggle_visibility('friendslist');">
  <div class="friendssearch">
    <div id="friendssearchbox"></div>
  </div>
        <ul id="friendslist" style="display: none;">
            <li>
              <a href="#">  
                <div class="friendsflybox" title="Friends Name">
                    <p class="friendsflyboxname">Ryan Bennett</p>
                </div>
              </a>
            </li>
        </ul>
    </div>

Javascript: 

<script> 
(function ($) {
 // custom css expression for a case-insensitive contains()
 jQuery.expr[':'].Contains = function(a,i,m){
   return (a.textContent || a.innerText || 
"").toUpperCase().indexOf(m[3].toUpperCase())>=0;
 };

 function listFilter(header, list) { // header is any element, list is an unordered list
 // create and add the filter form to the header
 var form = $("<form>").attr({"class":"filterform","action":"#"}),
    input = $("<input>").attr({"class":"filterinput clearFieldBlurred  
ClearField","type":"text", "value":"Start typing a Name"});
$(form).append(input).appendTo(header);

$(document).ready(function() {
$('.clearField').clearField();
}); 

$(input)
  .change( function () {
    var filter = $(this).val();
    if(filter) {
      // this finds all links in a list that contain the input,
      // and hide the ones not containing the input while showing the ones that do
      $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
      $(list).find("a:Contains(" + filter + ")").parent().slideDown();
    } else {
      $(list).find("li").slideDown();
    }
    return false;
  })
.keyup( function () {
    // fire the above change event after every letter
    $(this).change();
});
} 
//ondomready
$(function () {
  listFilter($("#friendssearchbox"), $("#friendslist"));
});
}(jQuery));
</script>

Ответы [ 2 ]

1 голос
/ 23 мая 2011

Вам нужно будет сделать что-то похожее на код, который я разместил ниже. Это предполагает, что вы можете получить доступ к объекту, который содержит результаты поиска. 

function toggle_visibility(id)
{
    //Check if there are any search results to display
    var searchResultLength = document.getElementById(searchResultID).innerHTML.length;

    if (searchResultLength > 0) // display div
    {
        var e = document.getElementById(id);
        e.style.display = 'block';
    }
    else //No search results, hide div
    {
        e.style.display = 'none';
    }
}

Как правило, вам нужно определить, есть ли у вас результаты поиска, чтобы отобразить до того, как вы попытаетесь изменить видимость div.

// РЕДАКТИРОВАТЬ ПОСЛЕ КОММЕНТАРИЙ

ОК, похоже, результаты добавляют li к ul. Таким образом, предполагая, что код убирает li и добавляет их, вы должны проверить количество элементов в ul == 0. См. Ниже. 

$('#friendslist > li').length

Если честно, у меня возникли трудности с попыткой точно определить, что это за код. делает. Я, конечно, не эксперт JQuery. Я бы сказал, что если приведенный выше код не поможет вам в правильном направлении, у меня нет идей.

0 голосов
/ 23 мая 2011

Если вы хотите, чтобы оно отображалось только при вводе поля, используйте атрибут onFocus = "method ()".сопровождаемый onBlur = "method ()".этот блок будет отображаться при входе в поле и скрываться при выходе. 

<input id="searchbox" type="text" onFocus="toggle_visibility('friendslist');" onBlur="toggle_visibility('friendslist')">

<ul id="friendslist" style="display: none;">
  <!--search results HTML-->
</ul>

научить человека ловить рыбу: http://www.w3schools.com/jsref/dom_obj_event.asp

// РЕДАКТИРОВАТЬ

Я думаю, что ответ Quickfire является лучшим решением.но, насколько я понимаю, вы хотите, чтобы результаты отображались / скрывались, поэтому я изменил его метод, чтобы он лучше подходил вашей разметке. 

function toggle_visibility(id){

    //Get the total number of <li> within my search result
    var results=document.getElementById(searchResultID).childNodes.length;

    if (results > 0){ // we have more than 0 results
        var e = document.getElementById(id);
        e.style.display = 'block'; // show the element
    }else{ //No search results, hide div

        e.style.display = 'none'; //hide the element
    }
}
...