CODEWITHSUNDEEP
jqueryspringspring-bootautocomplete
java-user
java-user

Reputation: 271

jquery autocomplete from database in spring boot

I'm new to Spring boot,

I need to do autocomplete suggestion for my website and the data should be retrieved from database. I want to use JQuery autocomplete. here is my code but it doesn't work! The data is retrieved by using Spring boot in JSON form have a look.

Please tell me if I'm missing something or I wrote something wrong or the source I gave is wrong, well here I did found one, it's on php but what matters is jQuery and this one too, and also this video in it he does on Spring boot and I did the same but it still don't work.

Here is my Controller:

@Controller
public class EmpController {
    @RequestMapping(value = "/autocomplete")
    @ResponseBody
    public List<String> autoName(){
        List<String> designation = dao.getDesignation();
        return designation;
    }

    @RequestMapping(value="/save",method = RequestMethod.POST)    
    public String save(@ModelAttribute("emp") Emp emp){
        dao.save(emp);
        return "redirect:/viewemp";
    }

Here is my jsp:

<body>
<form action="save" method="post">
Name: <input type="text" id="hint" name="hint" >
<input type="submit" name="submit" value="View">
</form>


<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</body>

Here is my jQuery:

$(document).ready(function(){
  $("#hint").autocomplete({
      source: "/autocomplete",
      minLength: 1
  });
});

Please help..!!

Upvotes: 4

Views: 5899

Answers (2)

Cybertronian
Cybertronian

Reputation: 483

Your code looks fine to me, Anyway

I too was stuck like you, so I did it from the Start..

you don't need to do it from the start, here is the code with autocomplete with narrowing too...

But remember if you are using jQuery to Autocomplete a text field, then you have to include these script and css links from jQuery UI in your html or jsp file.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>

Controller:

@Controller
public class EmpController {
    @RequestMapping(value = "/autocomplete")
    @ResponseBody
    public List<String> autoName(@RequestParam(value = "term", required = false, defaultValue = "")String term){
        List<String> designation = dao.getDesignation(term);
        return designation;
    }

}

EmpDao:

@Service
public class EmpDao {

    @Autowired
    private EmpRepository repo;

    @Transactional
    public List<String> getDesignation(String term) {
        return repo.getDesignation(term);
    }
}

Repository:

public interface EmpRepository extends JpaRepository<Emp, Integer> {

@Modifying
    @Query(
            value = "select e.designation from emp69 e where e.designation LIKE %:term%",
            nativeQuery = true
    )
    List<String> getDesignation(String term);

}

JQuery:

$( function() {
    $( "#tags" ).autocomplete({
      source: "autocomplete",
      minLength: 3
    });
  } );

The minLength: 3 will make field to start suggesting when input letter gets equal to 3

url of your autocomplete page will be: http://localhost:8080/autocomplete?term=developer

The developer in the url is your data saved as designation.

Hope this will help..

Upvotes: 3

A.khalifa
A.khalifa

Reputation: 2496

Try this

   $(function(){
     $.getJSON("http://example:8080/autocomplete", function(data) {
      $( "#hint" ).autocomplete({
         source: data    
           });
        });
    });

Upvotes: 1

Related Questions