Forced selection

Hey guys! First of all … congratulations. This is really an impressive piece of code. Works better then the 3 others I tried so fare.

In my opinion, you guys are missing only one very important feature … being able to force or not a selection in the list. That feature should take care of all the required behaviour that such a feature would need.

• If the forced option is activated the user should not be able to leave an incomplete keyword
• The selection should be triggered at all time because in some cases there can be an extra hidden field that needs to be updated that contains an ID or something

If somebody has a way of doing it with a few hacks to my code please le me know … This is what i am doing right now

// Activating typeahead on class cp
$('.cp').typeahead({ 
// forced: true, -> Not working !
name: 'nom', 
prefetch: 'ajax_recherche_ville.php', 
limit: 50 
});

// On sellection, adding a hidden value to ville_id
$('.cp').bind('typeahead:selected', function(obj, datum) { 
$('input:hidden[name=ville_id]').val(datum.id); 
});

// We do not allow enter on the cp field to avoid incomplete selection
$('.cp').keypress(function (e) {
if (e.which == 13) {
return false;

// This is not a real solution ... it's not a 100% forcing a selection
// The user can clique elsewhere in the screen to close the box
// Or he can clique on the submit button over an incomplete keyword

}
});

If only this was as simple as forced: true!

[tobia]

I’m interested in this as well.

I need a searchable menu, with all the features of typeahead + bloodhound, but with a hidden field to hold the selected ID and some mechanism to force a selection (and clear the typeahead field if nothing was selected, as a feedback to the user.)

Am I looking at the wrong project to achieve this input type?

Edit: here’s my solution, which seems to be working so far:

// force selection and set/reset hidden field with the ID
let selected = null;
$input.on('typeahead:select', (event, datum) => {
    selected = datum;
    $hidden.val(datum[id_key]);
});
$input.on('change blur', (event) => {
    if (!selected || selected[display_key] != $input.val()) {
        selected = null;
        $hidden.add($input).val('');
    }
});

[alebak]

My solution:

var search = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: '/?data.json',
        remote: {
            url: '/?data.json&search_query=%QUERY',
            wildcard: '%QUERY',
            filter: function (items) {
                // Map the remote source JSON array to a JavaScript object array
                return $.map(items, function (item) {
                    return {
                        id: item.id,
                        name: item.name
                    };
                });
            }
        }
    });

    // Initialize the Bloodhound suggestion engine
    search.initialize();
 
    $('#search_field').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'data_name',
        display: 'name',
        source: search.ttAdapter()
    }).on('change blur', function () {        
        // Force select an item
        match = false
        
        $.each(search.index.datums, function (i, item) {
            if ($('#search_field').val() == item.name) {
                match = true;
            }
        });

        if (!match) {
            $('#search_field').val('');
        }
    });