Recherche en html Javascript

J'ai le code html ci-dessous, aussi je vais avoir un textbox pour entrer le mot-clé, Ce que je veux, c'est que l'utilisateur écrit dans cette zone de texte la recherche javascript dans ce code html en utilisant le prénom et nom, et en comparant les éléments, si un élément ne correspond pas, je veux afficher: none son conteneur div. Comment puis-je faire en utilisant JS et le travail sur Firfox et IERecherche en 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>

Source

2009-02-22 Amr Elgarhy

Je trouve cet article, qui a vraiment résolu mon problème et son plus rapide que toutes les autres solutions i essayées: [jQuery Inline recherche Plugin] (http://vision-media.ca/resources/jquery/jquery-inline-search-plugin) –

Cela semble très inefficace si vous avez un ensemble de contacts plus à afficher. La façon la plus simple serait d'utiliser jQuery et lier une fonction à keyUp événement de votre champ de texte: (en supposant que le code ci-dessus est contenu à l'intérieur quelque chose comme <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);

ajouter également .matching et .nonmatching cours à votre CSS. Comme cela a été dit, ceci est très inefficace, non seulement par la quantité de mémoire (et de bande passante) nécessaire, mais aussi par le temps CPU sur le filtrage (plus le temps de rendu). Cela peut être plus rapide si vous traitez ces données à l'intérieur d'un tableau ou si vous avez des jeux de données très volumineux, vous devriez récupérer les données filtrées paginées à la demande du serveur (cela peut également être fait par les fonctions AJAX de jQuery). Vous pouvez également filtrer différé dans le cas où l'utilisateur est encore en train de taper (filtre seulement s'il a arrêté de taper ~ 500ms).

toLowerCase() peut avoir quelques difficultés avec une entrée non-ASCII; donc si vous en avez besoin, vous devriez le tester sur vos langues cibles.

Source

2009-02-22 13:07:17 Energiequant

Vérifie ma réponse ça m'a plus aidé et a fonctionné parfaitement http://stackoverflow.com/questions/574816/search- in-html-javascript/903517 # 903517 –

cela peut vous aider:

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

Notez le nombre de div à vérifier est fixe et statique dans mon exemple. Cela devrait être amélioré, mais cet exemple fonctionne dans IE6/FF3.

Espérons que cela peut aider.

Edit: ah ouais, le toUpperCase() peut être retiré, si vous voulez quelque chose de sensible à la casse

Source

2009-02-23 14:58:16 RVeur23

Recherche en html Javascript

Répondre

Questions connexes