recherche

Maison >interface Web >js tutoriel >Méthode jquery.fastLiveFilter.js pour implémenter le filtrage automatique des entrées_jquery

Méthode jquery.fastLiveFilter.js pour implémenter le filtrage automatique des entrées_jquery

WBOY
WBOYoriginal
2016-05-16 15:45:571285parcourir

L'exemple de cet article décrit comment jquery.fastLiveFilter.js implémente le filtrage automatique des entrées. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Cet effet est obtenu à l'aide du plug-in jquery.fastLiveFilter.js. Il est similaire à la fonction d'invite de saisie du champ de recherche et implémente la fonction de filtrage automatique des éléments correspondants. Lorsque vous saisissez, il correspondra intelligemment aux éléments correspondants. en fonction des caractères saisis. Le contenu est automatiquement répertorié pour améliorer l'expérience de fonctionnement humanisée. Si vous êtes intéressé par l'utilisation du plug-in jquery.fastLiveFilter.js, c'est un très bon exemple.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant : 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery过滤器插件fastLiveFilter</title>
<script src="jquery-1.6.2.min.js"></script>
<script>
//jquery.fastLiveFilter.js
jQuery.fn.fastLiveFilter = function(list, options) {
 options = options || {};
 list = jQuery(list);
 var input = this;
 var lastFilter = '';
 var timeout = options.timeout || 0;
 var callback = options.callback || function() {};
 var keyTimeout;
 var lis = list.children();
 var len = lis.length;
 var oldDisplay = len > 0 &#63; lis[0].style.display : "block";
 callback(len);
 input.change(function() {
  var filter = input.val().toLowerCase();
  var li, innerText;
  var numShown = 0;
  for (var i = 0; i < len; i++) {
   li = lis[i];
   innerText = !options.selector &#63; 
    (li.textContent || li.innerText || "") : 
    $(li).find(options.selector).text();
   if (innerText.toLowerCase().indexOf(filter) >= 0) {
    if (li.style.display == "none") {
     li.style.display = oldDisplay;
    }
    numShown++;
   } else {
    if (li.style.display != "none") {
     li.style.display = "none";
    }
   }
  }
  callback(numShown);
  return false;
 }).keydown(function() {
  clearTimeout(keyTimeout);
  keyTimeout = setTimeout(function() {
   if( input.val() === lastFilter ) return;
   lastFilter = input.val();
   input.change();
  }, timeout);
 });
 return this;
}
</script>
<script>
 $(function() {
 $('#search_input').fastLiveFilter('#search_list');
 });
</script>
<style type="text/css">
body { margin: 0px; background-color: #F6F6F6; }
.jq22{ width: 600px; height: 500px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; padding: 10px; }
</style>
</head>
<body>
<div class="jq22">
<input id="search_input" placeholder="输入文字开始筛选">
<ul id="search_list">
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>One</li>
 <li>awo</li>
 <li>bhree</li>
 <li>cne</li>
 <li>dwo</li>
 <li>ehree</li>
 <li>fne</li>
 <li>gwo</li>
 <li>hhree</li>
 <li>ihree</li>
</ul>
</div>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js imite la méthode d'implémentation des fonctions strtotime() et date() dans les compétences php_javascriptArticle suivant：js imite la méthode d'implémentation des fonctions strtotime() et date() dans les compétences php_javascript

Articles Liés

Voir plus