How to check if user has entered typeahed value

Question

I have the following code:

 var students = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('fullName'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: '/api/students?query=%QUERY',
                    wildcard: '%QUERY'                                                                                                               
               } 

            });


            $('#student').typeahead({
                minLength: 2,  
                highlight: true,  

            },
                {
                    name: 'students',
                    display: function (item) { return item.fullName },
                    source: students.ttAdapter(),

                    templates: {
                        empty: [

                            '<div class="tt-empty-message">' +
                            'No results found' +
                            '</div>'
                        ]                       
                    }

                }).on("typeahead:select",
                function (e, student) {

                    console.log("inside isselect");
                    isSelected = true;
                    vm.studentId = student.id;

                });

I am trying to capture a scenario where if a user enters some gibberish or something apart from typeahead values and clicks on submit button, then I need to display an error message. To do that, I need to capture the typeahead list and see if the typeeahed list contains the input value. How can I accomplish this?

I have searched for this solution for 5 hours now. I have looked and implemented similar answers on other threads but nothing seemed to work. For instance take a look at this answer:

http://jsfiddle.net/Fresh/bbzt9hcr/

I tried the baove code but the typeahed does not even come up. Whereas my code works perfectly fine. Please let me know how I can solve this. Thank you in advance.

Answer 1

There are multiple way to approach this, the simplest: you could listen the typeahead change event and use a variable to store the selected value, then on submit check and send that variable: http://jsfiddle.net/alfredopacino/bbzt9hcr/290/ .

yourTypehead.on('typeahead:selected', function($e, datum) {  // suggestion selected
      selectedMovie = datum.value
});
$('#submit').click(function() {
   if(selectedMovie) {
                //your ajax call
   } else {
       alert("no valid movie")
   }

});

The problem with this is it doesn't covers the case the user enters manually a valid value. To cover this scenario you could follow two ways:

• onSubmit you can add a 'remote validation': basically an additional ajax request to check if the value is valid using the server
• convert your typeahead selection in a "tag selection", limit the tags to 1 and forbid any custom value https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ (there are TONS of plugin doing that)