Get selected value in datalist using jQuery

Question

Very simple and straight forward. I pre-populated a HTML datalist with values, on the form when I want select a value and insert it into SQLite database. This is my example

Answer 1

:selected does not work on datalist options, as one datalist can provide suggestions for multiple inputs. If two different inputs contain two different suggestions from the list, which would be the selected one?

As mentioned in other comments, you can check the value of the input on change like so:

$("input[name='Typelist']").on('input', function(e){
    var selected = $(this).val();
});

However, if you want to make sure that the value is actually one of the options from the datalist you'll have to do an extra check, as with a datalist visitors can still input different values in the input. Datalist merely offers suggestions.

A solution to check if the value is in the datalist:

$("input[name='Typelist']").on('input', function(e){
   var $input = $(this),
       val = $input.val();
       list = $input.attr('list'),
       match = $('#'+list + ' option').filter(function() {
           return ($(this).val() === val);
       });

    if(match.length > 0) {
        // value is in list
    } else {
        // value is not in list
    }
});