Question

I was looking for a solution that

• displayed multiple columns of independent data
• did not require a click (or focus) to show the list
• had a simple interface
• supported visible & hidden values (like HTML’s <select>)
• has color highlighting to show matches
• automatically deletes character entries that are not in any of the choices

Answer 1

I wasn’t able to find a control that met these requirements, so I created one. Here is an image of the control in use.

The code to create this control is:

$('input#scrolltest').menuoptions({                                         
    "Data": { 1:"January",2:"February",3:"March",4:"April",5:"May", 6:"June",7:"July",
              8:"August",9:"September",10:"October",11:"November",12:"December" },
    "onSelect": function(mo, data) {                                        
         console.log(mo, data.newVal, data.type );                          
    },                                                                      
    "InitialValue": { 'val': 'December'},                                   
    "Height": 200,                                                          
    "Sort": []                                                              
});                 

This control is documented here

The above example is part of this demo page