Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Dev0ps's avatar

How to access selected value of typeahead.js

i am using typeahead.js and when user type any word it shows suggestions, but after selecting its show null in form submit

typeof $.typeahead === 'function' && $.typeahead({
        input: '.js-typeahead-hockey_v2',
        minLength: 1,
        maxItem: 5,
        maxItemPerGroup: 6,
        order: "asc",
        hint: true,
        searchOnFocus: true,
        blurOnTab: false,
        matcher: function (item, displayKey) {
            if (item.id === "BOS") {
                item.disabled = true;
            }
            return true;
        },
        multiselect: {
            limit: 1,
            limitTemplate: 'You can not select more than 1 user to send a feedback',
            matchOn: ["uid"],
            cancelOnBackspace: true,
            data: function () {

                var deferred = $.Deferred();

                deferred.always(function () {
                    console.log('data loaded');
                });

                return deferred;
                $("#feedbackreceiver").val(item.name);
            },
            callback: {
                onClick: function (node, item, event) {
                    console.log();
                    alert(item.name + ' Selected!');
                },
                onCancel: function (node, item, event) {
                    console.log();
                    alert(item.name + ' Removed!');
                }
            }
        },
        // templateValue: "name",
        display: ["name","username"],
        emptyTemplate: 'We are looking for your friends. But we can\'t find it. Let\'s invite them!',
        source: {
            teams: {
                url: "/ShowFeedbackReciever",
                type: "GET"
            }
        },
        callback: {
            onClick: function (node, a, item, event) {
                console.log(item.name + ' Added!');
                // $('#feedbackreceiver').val(item.name);

            },
            onSubmit: function (node, form, items, event) {
                event.preventDefault();

                alert(JSON.stringify(items))

            }
        },
        debug: false
    });

this will show selected value // alert(JSON.stringify(items))

my HTML code

 <div id="user-feedback-mension-addon" class="form-group with-icon label-floating" style="display: none">
            <div class="typeahead__container">
                <div class="form-group typeahead__field">
                        <span class="typeahead__query">
                             <label class="control-label">Please enter name of user you want to send feedback</label>
                                           <input id="feedbackreceiver" class="form-control js-typeahead-hockey_v2" name="hockey_v2[query]" placeholder="" value="" type="search">
                                <svg class="olymp-small-pin-icon1"><use xlink:href="{{ asset('svg-icons/sprites/icons.svg#icon-car')}}"></use></svg>
                        </span>
                </div>
            </div>
        </div>
0 likes
1 reply

Please or to participate in this conversation.