Tuesday, February 18, 2014

jQuery AutoComplete with JSON:

<input name="txt_search" type="text"  id="txt_search"  />
.
.
.
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
.
.
.

jQuery("#txt_search").autocomplete({
source: function(request, response) {
   $.ajax({
   url: "search.jsp",
   type: "POST",
   dataType: "json",
   data: { searchStringParam: request.term},
   success: function( data ) {
    response( $.map( data, function( item ) {
       return {
           label: item.value,
           value: item.value,
       }
       }));
   },
   error: function (error) {
      var obj = jQuery.parseJSON(error);
      alert('error: ' + obj.value);
   }
   });
   },
   minLength: 2
});

Search.jsp:
[
{"value":val1},
{"value":val2},
]

No comments:

Post a Comment