Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <style type="text/css">%code%</style> <!-- fcbkListSelection.css -->
  <script src="http://jsbin.com/ilaru"></script> <!-- fcbkListSelection.js -->
  <script src="http://jsbin.com/epimi"></script> <!-- jquery.autocomplete.js -->
  <script src="http://jsbin.com/uhuwi"></script> <!-- localdata.js -->
  <title>Sandbox</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <style type="text/css" media="screen">
    body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
  </style>
</head>
<body>
  <input id="filter"/>
  <ul id="fcbklist"></ul>
  
  <script>
    var $fcbklist = $('#fcbklist');
​
    /***
      localdata.js contains an array of cities.
      We use this array to populate the list.
    ***/
    $.each(cities, function(i, city){
      $fcbklist.append($('<li/>').text(city));
    });
    var $listItems = $fcbklist.find('li');
​
    // id (ul id), width, height (element height), row (elements in row)        
    $.fcbkListSelection($fcbklist, 570, 50, 4);
​
    $('#filter').keyup(function (){
      var $this = $(this);
      
      var val = $this.val();
​
      /*** Show all the listItems when the filter is cleared ***/
      if (!val) {
        $this.data('lastVal', val);
        $listItems.show();
        return;
      }
​
      var lastVal = $this.data('lastVal');
      $this.data('lastVal', val);
      /*** If the filter hasn't changed, do nothing ***/
      if(val === lastVal) { return; }
      
      /*** Hide the results of the previous filter ***/
      $listItems.filter(':visible').hide();
​
      /***
        Show only the items of the current tab that match
        the filter.
      ***/
      var $tabItems;
      switch($(".view_on").attr("id").replace("view_","")) {
        case "all":
          $tabItems = $listItems;
          break;
        case "selected":
          $tabItems = $listItems.filter('[addedid]');
          break;
        case "unselected":
          $tabItems = $listItems.filter(':not([addedid])');
          break;  
      }
      $tabItems.filter(':icontains(' + val + ')').show();
    });
    
    /***
      This is a custom pseudo-selector that selects
      elements whose text contains the specified substring.
      It is case-insensitive, unlike the built-in :contains selector.
    ***/
    $.extend($.expr[':'], {
      icontains: function(elem, i, match){
        return (new RegExp(match[3], 'im')).test($(elem).text());
      }
    });
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers