Datalist class demo

Datalist example page

Example 1: Straight Datalist input with no dropdown button.


          /*
          Using datalist without a dropdown button is a useful alternative to Scriptaculous's Autocompleter.Local
          as you can use JSON data rather than only a simple array. For example with Datalist you can
          set your JSON like { 'NH|North east': 'New Hampshire' } and only show New Hampshire to the user but
          also be able to use "NH|North east" inside of your application.
          */
          $('dataList1').datalist(states_json,{ noButton:true },{ width: '250px' });

Type here:

Example 2: Datalist input with dropdown button.


        /*
          The minChars means that autocomplete will not kick in til at least 4 characters have been typed in.
          The disableButtonForIE: [6] means that if the dropdown button is hit IE 6 users will get the disabled message.
          In the last argument we are setting the popup to be 250 pixels in width and height
        */
        $('dataList2').datalist(states_json,{ minChars:4,disableButtonForIE: [6] },
                                            { width: '250px',height:'250px' });

Type or press dropdown button:

Example 3 & 4: Datalist input with dropdown button with offsetLeft setting and demonstrate DatalistMouseWheel


         /*
            Element on left side. Purpose is demonstrate DatalistMouseWheel.
         */
         $('dataList3').datalist(scac_name_json,
                                 {},
                                 { width: '250px',height:'150px' });
         /*
            Element on the right side. This is similar to example 2; however, notice the offsetLeft setting is -300. This will move the
            popup 300 pixels to the left. Also, for IE 6 users the shim to properly cover the SELECT tag has been set.
         */
         $('dataList4').datalist(scac_name_json,
                                 { IE6Shim: true,update: 'alt_autocomplete_choices'},
                                 { width: '250px',height:'150px',offsetLeft:-300 });

         /*
            The following code stops the main page from scrolling after you mousewheel to the bottom of the popup.
            This behavior is on Webkit and IE browers but is not found in Firefox 3 and up.
            From a Webkit or IE browser click on the dropdown button for the datalist element on the
            left side and mouse wheel down to the bottom of the popup. If you keep mouse wheeling down you
            will see that the entire page scrolls down. The datalist element on the right will not do this.
            It is suggested that you always enable DatalistMouseWheel. The default argument is
            "autocomplete_choices"; therefore you may just set DatalistMouseWheel() after the dom is loaded.
         */
         DatalistMouseWheel.on('alt_autocomplete_choices');

Type or press dropdown button:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada ultricies suscipit. Fusce dictum aliquet libero, non vestibulum felis pretium et. Suspendisse vitae arcu metus. Curabitur sit amet neque sit amet ligula semper elementum. Nunc ut dui sit amet felis laoreet ornare. Proin accumsan eros et risus hendrerit sed ultrices lectus rutrum. Ut sed elit non nibh ullamcorper molestie quis in enim. Curabitur ultrices feugiat elit, sodales laoreet sem dignissim et. Donec ornare arcu velit. In adipiscing, ipsum a ullamcorper rutrum, nisi mi semper magna, vel adipiscing sem mauris sit amet dolor. Nunc interdum, augue a blandit aliquam, dui est volutpat ipsum, eu sodales sapien mauris ut libero. Nullam laoreet pharetra ornare. Curabitur laoreet, neque a imperdiet faucibus, ipsum leo ullamcorper leo, id facilisis lectus leo vel urna. Sed vitae hendrerit mauris. Nulla viverra ligula sed mi consectetur dapibus.

Vestibulum interdum, elit vitae tincidunt auctor, massa dui ultrices risus, quis tristique metus libero at odio. Donec felis purus, adipiscing eget ultricies vel, placerat ac nulla. Fusce pellentesque nulla in mauris vestibulum fermentum ac at metus. Praesent convallis urna at ligula posuere laoreet. Nam et dui nec dolor feugiat consectetur. Suspendisse pharetra vestibulum egestas. Vestibulum non dolor id libero adipiscing feugiat at non turpis. Suspendisse elit massa, vehicula sit amet porta cursus, laoreet ac massa. Quisque et enim tellus. Nunc tincidunt varius diam ut scelerisque. Maecenas sit amet lacus enim, vitae imperdiet urna. Morbi vitae augue imperdiet ante aliquam porta et et sem. Sed non lorem quis diam pellentesque accumsan in sit amet metus.

Donec neque magna, consequat non imperdiet in, accumsan et dui. Donec non nisi sem, laoreet porttitor justo. Vivamus a neque et nisl tempor malesuada egestas et augue. Etiam sed sem id dui placerat aliquam vel eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget lobortis magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla id lacus lacus. Etiam elementum vestibulum vestibulum. Praesent at tortor nunc, non mollis enim. Sed vitae felis nibh, consequat sollicitudin arcu. Vestibulum volutpat, nunc non commodo varius, nunc libero venenatis lorem, ut vulputate ligula velit sodales purus. Maecenas quis nulla non mi tincidunt ornare. Quisque consectetur, ligula ut adipiscing pharetra, mi ante posuere lorem, et volutpat nibh augue a libero. Donec feugiat est non ligula hendrerit malesuada. Morbi convallis, sem ut rhoncus consequat, lacus metus euismod erat, ac varius ipsum nisl quis ante.