Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to implement select event of Autocomplete feature in jsp?

    • 0
    • 1
    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 382
    Comment on it

    Sometimes we need do functionality when we select any item from the suggestions that display by autocomplte feature.

    Example: In the below example I'm using autocomplete() function to get suggestions with the provided keyword. As below by implementing "select" event of autocomplete we can write our code to do functionality according to selected item.

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Search</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    
    <script type="text/javascript">
    
        $(function() {
        $("#search-box").autocomplete({
                width: 300,
                max: 10,
                delay: 100,
                minLength: 1,
                autoFocus: true,
                cacheLength: 1,
                scroll: true,
                highlight: false,
                source: function(request, response) {
                    $.ajax({
                        url : 'url', //Here we will user the URL that we want to hit
                        type : 'post',
                        async : true,
                        cache : false,
                        data : {
                            searchText : request.term
                            },
                        beforeSubmit : function() {
                        },
                        success : function(response) {
    
                            if (response.status == 'OK') {
                                var data = response.suggestedKeywords; //Here populate data with fetched list
                                            response(data);
                            } else {
                                alert("Failed try again.....");
                            }
    
                        },
                        error : function() {
                            alert('System error occured, please try again ...');
                        }
    
                    });
                },
                select: function(event, ui) {
                    var data = ui.item.data;
                    //Pur you code here to manipulate with selected value
                   }
    
            });
    
    
    });
    </script>
    
    </head>
    <body>
        <div class="ui-widget">
            <label for="search-box" >Search</label>
            <input type="text" id="search-box"> 
        </div>
    
    </body> 
    </html>
    

    Hope this will help you :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: