It’s a pretty simple, and fairly slick way to do auto-complete on an input text box (as long as your list isn’t too long, since all items will be rendered into the HTML of the page).But I found myself running into a problem: how do I get a numeric or other ID out of the selected option, when I am showing a human-friendly code or description as the value?The DataList has a collection of Option tags with a value, and you can provide a description (though I don’t know if this is part of the standard or not). For more information about selecting option in HTML5 datalist, please search previous articles of developepaer or continue to browse the following articles.
The first time you can select all the options, but as soon as one is selected, you will see only that option in the drop down, until your clear the value again. These days, Derick spends most of his time working on content for his own entrepreneurial efforts at WatchMeCode.net, playing video games when he gets a chance, and writing code for for his few remaining clients. When you attach a DataList to an Input, you end up with a nice drop-list of items that can be selected, or auto-filled as you type:But the vast majority of the time, I need to get the id of the item that was selected – not the human-friendly name/code or description.Unfortunately, the DataList spec does not include any kind of “id” attribute for an Option. You can name and apply any attribute you want, and have it contain any data you want, as long as the attribute starts with “data-“.Given that, I added a “data-id” to my DataList options, and included my object id in there.But now I’m running into the problem of retrieving the data-id from the selected value because there is no “selected” or “checked” or other marker on a DataList to tell you which item from the list was selected. This means typing 8 characters will run the jQuery code 8 times – but it will only find the exact matching option when typing.If you want to shortcut that, use your keyboard arrow keys or a mouse cursor to select the item you want.One problem I’ve run into with this solution, is the accidental inclusion of a single or double quote in the value. Derick has built software for organizations of all shapes and sizes, including contributions to Microsoft's MDSN library, running several very highly regarded open source projects, creating software solutions for large financial organizations, healthcare orgnaizations, world-class airlines, the U.S. government, and more. Sure, you could use an HTML “id” – but this would turn the item into a 1st class HTML element with a CSS-selectable id.So… what’s the answer? The