Add option to filter items by letter - demo provided

[jasondavis]

I am using this library as a Tag Selector/Picker for my Bookmarking app.

Sometimes I have hundreds of tags list items shown in the popup selector which is too much to show and find what I need in the pop up so I wanted to add a list of alphabetical letters across the top to act as tabs to sort and filter the tag items shown and make it easy to find what I am looking for.

jQuery Plugin for Alphabetical list filter:

I found this jQuery library which does exactly what I need to a list of items and was able to add it to this library to make it work as my demo image below shows:
Project Demo - http://ericsteinborn.com/jquery-listnav/
GiutHub - https://github.com/esteinborn/jquery-listnav

Demo of my integration of alphabetical list filter and use as a tag selector:

Here is a live JSFiddle Demo in which I have combined the 2 libraries but I still need to make it into 1 library. https://jsfiddle.net/jasondavis/zgzh5b67/

---

My Feature Request:

Right now to make this work I have to include the jQuery library for jQuery ListNav and then init and call it from jQuery-gentle-select

It would be nice if someone could add this same functionality into the jQuery-gentle-select library so that I dont have to use a 2nd library. I am not able to do it myself but here is the JavaScript file for jQuery ListNav - https://github.com/esteinborn/jquery-listnav/blob/master/jquery-listnav.js It is about 350 lines of code.

Can this be added as a feature? I would appreciate anyone's help in this very much thanks in advance.

[jasondavis]

UPDATE
I am working on integrating as 1 library will post my results soon

[jasondavis]

I have integrated the list Nav filter plugin with gentle-select here https://jsfiddle.net/jasondavis/zhav9fbf/

I have not tested with multiple select elements on the page as I only need 1 instance but this is a good start and works for me so far. Improvements welcomed.

---

Updated Demo: https://jsfiddle.net/jasondavis/zhav9fbf/

Preview:

---

New Options

option ulId: "test123" and all properties in the letterFilter object are new and used for the new letter filter.

var options = {
    minWidth: 100, // only applies if columns and itemWidth not set
    itemWidth: undefined,
    columns: undefined,
    rows: undefined,
    title: undefined,
    prompt: "Make A Selection",
    maxDisplay: 0, // set to 0 for unlimited
    openSpeed: 400,
    closeSpeed: 400,
    openEffect: "slide",
    closeEffect: "slide",
    hideOnMouseOut: true,
    ulId: "test123", // new - adds a CSS ID attribute to the <ul> list.  Letter filter below uses this ID to find the list to filter on currently =(
    letterFilter: {
        showLetterFilter: true, // turn letter filtering on or off
        includeAll: true,      // Include the ALL button
        includeOther: false,    // Include a '...' option to filter non-english characters by
        includeNums: true,     // Include a '0-9' option to filter by
        flagDisabled: true,    // Add a class of 'ln-disabled' to nav items with no content to show
        removeDisabled: false, // Remove those 'ln-disabled' nav items (flagDisabled must be set to true for this to function)
        allText: 'All',        // set custom text in navbar to ALL button
        noMatchText: 'No matching tags', // set custom text for nav items with no content to show
        showCounts: true,      // Show the number of list items that match that letter above the mouse
        dontCount: ''          // A comma separated list of selectors you want to exclude from the count function (numbers on top of navigation)
        onClick: null,         // Set a function that fires when you click a nav item. see Demo 5
        prefixes: [],          // Set an array of prefixes that should be counted for the prefix and the first word after the prefix ex: ['the', 'a', 'my']
        filterSelector: ''     // Set the filter to a CSS selector rather than the first text letter for each item
    },
}