春季启动时数据库中的jquery自动完成答案

【问题标题】：jquery autocomplete from database in spring boot春季启动时数据库中的jquery自动完成
【发布时间】：2019-09-10 12:47:07
【问题描述】：

我是 Spring Boot 新手，

我需要为我的网站做自动完成建议，并且应该从数据库中检索数据。我想使用 JQuery 自动完成功能。这是我的代码，但它不起作用！使用 Spring boot 以 JSON 格式 have a look 检索数据。

如果我遗漏了什么，或者我写错了什么，或者我提供的来源有误，请告诉我，我确实在这里找到了one，它在 php 上，但重要的是 jQuery 和 this one，还有this video 在其中他在 Spring Boot 上做了，我也做了同样的事，但它仍然不起作用。

这是我的控制器：

@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";
    }

这是我的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>

这是我的 jQuery：

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

请帮忙..!!

【问题讨论】：

你的 spring 控制器在哪里使用 term 变量？
我看到自动完成功能不起作用，所以我只做了必要的部分，你可以参考这个video，一旦它开始建议，我稍后会做缩小的东西..@SudhirOjha跨度>
我不明白它怎么可能重复，我的问题是关于 spring boot 和 jquery @SimonMartinelli
看看这个答案中的 $.getJSON
你应该告诉什么是行不通的。您是否在浏览器控制台中收到任何 Java Script 错误？

标签： jquery spring spring-boot autocomplete

【解决方案1】：

无论如何，你的代码对我来说看起来不错

我也和你一样被卡住了，所以我从一开始就这样做了..

您不需要从一开始就这样做，这里是带有自动完成功能的代码...

但请记住，如果您使用 jQuery 来自动完成文本字段，那么您必须在您的 html 或 jsp 文件中包含来自 jQuery UI 的这些脚本和 css 链接。

<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
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);
    }
}

存储库：

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
    });
  } );

minLength: 3 将使字段在输入字母等于 3 时开始提示

您的自动完成页面的网址将是：http://localhost:8080/autocomplete?term=developer

网址中的developer 是您保存为指定的数据。

希望这会有所帮助..

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：