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

    • 0
    • 1
    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 2.39k
    Comment on it

    Sometimes wee need to call an API or action to get matching list with the provide keyword in Search box, for this we usually implemente autocomplete feature to input field for searching purpose by doing AJAX call.

    Example: In the below example I'm using autocomplete() function inside which I have made an AJAX call. On success I'm getting list from ajax response and passing that list to response() method that will then populate that list in autocomplete suggestions.

    <!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 ...');
                        }
    
                    });
    
                }
            });
    
    
    });
    </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: