Live search on jsp

Question

Live search on jsp

Please tell me if it is possible to implement live search on jsp pages? I know that usually a live search is done by AJAX, but I didn't find how to fasten it to Java(

0

java javascript веб-программирование jsp

Author: Socket123, 2016-10-02

Source

1 answers

score 5 · Accepted Answer

What you call a "Live Search" is usually called Autocomplete, there is also a Suggestbox.

AJAX is not screwed to the jave. He doesn't really care about zhava or php. And the toad does not know who executes the AJAX request or you open the address in the browser yourself.

If you do not want to implement your live search from scratch (which is very difficult for a noob), then you should master some ready-made solution. There are many of them. They often use jquery as an example. I don't know why. Like and napridumali any something more suitable pieces for this purpose. But once jquery, then jquery.

Your form.jsp should form a page similar to this one (slightly modified example with https://jqueryui.com/autocomplete/)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Remote datasource</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }
 
    $( "#birds" ).autocomplete({
      source: "search.jsp",
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>
 
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
 
 
</body>
</html>

You can find in this text $( "#birds" ).autocomplete({source: "search.jsp",...
This indicates that autocimplete jquery should use AJAX to access search.jsp for hints (in the original it was search.php).
search.jsp in turn, it must understand the term parameter, in which the string entered in the input field is passed and the response is returned as JSON.
A GET request is sent to the serversearch.jsp?term=abc
search.a jsp can be like this

<% response.setContentType("application/json"); %>

[
   "${param["term"]", 
   "${param["term"]def", 
   "${param["term"]zxc"
]

I don't know jsp very well, so errors are possible. But the point, I think, should be clear.