CODEWITHSUNDEEP
jqueryspringspring-mvcjquery-autocomplete
skcgc
skcgc

Reputation: 69

Implementing jquery autocomplete in springmvc

I am trying to implement autocomplete for searching users 

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript"        src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<title>Insert title here</title>
<script type='text/javascript' src="js/jquery.autocomplete.js"></script
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />
<script type="text/javascript">
$(document).ready(function(){
        $('#search').keyup(function() { 
        var search  = $('#search').val();
         if(search.length>2){   
            $.ajax({
                 type:"POST",
                 url: "searchuser",
                 cache:false,
                 data: 'search=' + $("#search").val() ,
                 success: function(response){               
                    $.each(response, function (index, value) {
                            alert(value);
                     }
                    );
                 },
                error: function(e){
                 alert('Error: ' + e);
                 }
                });
         }
     });
 });
 </script>   
</head>
 <body>
 <form>
   <input id="search" type="text"  name="search" />
  </form>
  </body>
 </html>

i am getting values from data base and able to pop up values using alert but i want to implement auto complete using that values can any one suggest me how i can with an example on spring MVC

Upvotes: 0

Views: 4648

Answers (1)

vineet
vineet

Reputation: 336

Instead of above code, just use jqueryUI autocompete feature. It will give you all the handles that you require.

$( "#search" ).autocomplete({
  source: "searchuser",
  minLength: 3,
  select: function( event, ui ) {

    console.log( ui.item ?
      "Selected: " + ui.item.value + " aka " + ui.item.id :
      "Nothing selected, input was " + this.value );
  }
});

And at server side, 

@RequestMapping(value = "/searchuser", method = RequestMethod.GET)
public void searchUser(HttpServletResponse response,@RequestParam Map<String, String> params) {
    String jsonResponse = null;
    //Get params.get("term") --> It will be search criteria
    String jsonResponse= "[{\"fname\":\"atul\",\"userId\":1,\"name\":\"atul  kumar\",\"value\":\"atul  kumar\",\"label\":\"atul  kumar\"}]";                    
    response.setContentType("application/json");
    try {
        response.getOutputStream().print(jsonResponse);
    } catch (IOException e) {
        e.printStackTrace();
    }

}

PS: In returned JSON, label and value are important as label is shown in dropdown and value is bydefault set to input text. You can other values as well (as in example). Further processing can be done in select : functions(event,ui){}

Hope it clears the doubt. You should also check API and demo for jqueryUI

Upvotes: 2

Related Questions