CODEWITHSUNDEEP
javascriptjqueryhtmlautocomplete
Raja Shekar
Raja Shekar

Reputation: 133

autocomplete textbox with multiple values separated by full stop and Elements

Hi I am trying to develop a autocomplete textbox with multiple values separated by full stop and the element below is my code.

<script>
    $(function() {
        var availableTags = [
            "Electronics",
            "Motors",
            "Cloths"

        ];
        var Electronics = [
            "Laptops",
            "Mobiles",
            "Desktop"

        ];
        var Motors = [
            "Bike",
            "Car"

        ];
        var Cloths = [
            "Shirt",
            "Pants",
            "Jackets"

        ];
        function split( val ) {
            return val.split( /,\s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }
        $( "#tags" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).autocomplete( "instance" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                minLength: 0,
                source: function( request, response ) {
                    // delegate back to autocomplete, but extract the last term
                    response( $.ui.autocomplete.filter(
                        availableTags, extractLast( request.term ) ) );
                },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( ". " );
                    return false;
                }
            });
    });
    </script>
</head>
<body>
<div class="ui-widget">
    <label for="tags">Tag programming languages: </label>
    <input id="tags" size="50">
</div>
</body>

My requirement is when I enter '@' in the textbox the availabletags element should display with a '.' and it show the respective element field item. for example when I enter '@'in the textbox and I choose the 'motors' from the autocomplete list and '.' appears with bike and car. I am trying to achieve it. can someone help me out..

Upvotes: 1

Views: 787

Answers (1)

Satyapriya Mishra
Satyapriya Mishra

Reputation: 130

Below is a good link to get reference for your problem. Hopefully it will help you. https://github.com/LeaVerou/awesomplete

Upvotes: 1

Related Questions