List Filter Widget

Live filters a list of items with multiple fields as you type in the box

by Taylor Lopez

CSS

body { opacity: 1 }

JavaScript

function main()
{
    var lf = new ListFilter(["name","resource_uri"], list, $("body"), "#FF9999");
}

function ListFilter(columns, listSource, parentElement, borderColor)
{
    borderColor = typeof borderColor !== "undefined" ? borderColor : "#999999";
    this.columns = columns
    this.listSource = listSource
    
    var domcss = {
        "position":"absolute",
    	"width":"100%",
        "height":"100%",
        "left":"0",
        "top":"0",
        "padding":"10px",
        "box-sizing":"border-box",
        "display":"flex",
        "flex-direction":"column"
    }
    var txtboxcss = {
		"width":"100%",
        "box-sizing":"border-box",
        "font-size":"1.5em",
        "padding":"10px",
        "margin-bottom":"10px",
        "border":"2px solid" + borderColor,
        "border-radius":"10px"
    }
    var listcss = {
        "width":"100%",
        "box-sizing":"border-box",
        "border":"2px solid" + borderColor,
        "border-radius":"10px",
        "flex":"1",
        "overflow-y":"auto",
        "padding": "2px"
    }
    var listTablecss = {
        "width":"100%",
        "border-collapse":"collapse",
        "font-family":"Arial"
    }
    var trcss = {
        "border-bottom":"solid 1px #999999",
        "cursor":"default"
    }
    var tdcss = {
        "padding":"10px",
        "user-select":"none"
    }
    
    this.dom = $("<div>").css(domcss);
    this.txtbox = $("<input>").attr("placeholder","Filter by...").css(txtboxcss);
    this.dom.append(this.txtbox);http://jsfiddle.net/#run
    this.list = $("<div>").css(listcss);
    this.dom.append(this.list);
    
    var _self = this;
    this.listTable = $("<table>").css(listTablecss);
    this.listSource.forEach(function(elem){
        var row = $("<tr>").css(trcss).hover(function(){$(this).css("background-color", "#DDD")},function(){$(this).css("background-color", "transparent")});
        _self.columns.forEach(function(col){ row.append($("<td>").css(tdcss).text(elem[col])); });
  ...