使用数组或列表的JSP中的自动完成文本框

一尘不染

使用数组或列表的JSP中的自动完成文本框

jsp

我试图以不同的方式进行自动填充，但是根本没有任何效果。从这里到这里

希望你能帮助我。我有一个使用Spring MVC + JSP +
Hibernate的项目。我想创建一个搜索文本框，该文本框也可以作为客户姓氏的自动完成功能。

当我在Controller的帮助下打开客户页面时，我会通过模型发送一个包含客户的列表和一个具有姓氏的列表，其中最后一个用于自动完成。

这是我的控制器：

@Controller
@RequestMapping("/clients")
public class ClientsController {

@Autowired
public ClientsService clientsService;

@Autowired
private ServicesService servicesService;

@Autowired
private OrdersService ordersService;

@Autowired
private Order_serviceService order_serviceService;

@Autowired
private ObjectMapper objectMapper;


@RequestMapping(method = RequestMethod.GET)
public String listClients(Model model) {
    List<Clients> allClients = clientsService.listClients(
            new RequestAllClientsEvent()).getClients();

    List<String> lastNamesList = new ArrayList<>();
    for(int i = 0; i < allClients.size(); i++){
        lastNamesList.add(allClients.get(i).getLast_name());    
    }
    Collections.sort(lastNamesList);
    String json = "";
    try{
        json = objectMapper.writeValueAsString(lastNamesList);
    } catch(Exception e){}

    model.addAttribute("clientsList", allClients);
    model.addAttribute("lastNamesList", json);
    return "clients";
}

然后在jsp页面中，我想将我的lastNamesList添加到脚本源：

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$( "#query" ).autocomplete({
source: lastNamesList
});
});
</script>
</head>

我的输入文本框是：

<div class="ui-widget">
<input class="form-control" type="search" id="query" name="query" required>
</div>

我以为只要写一下我就能得到这样的东西source: lastNamesList：

 <script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>

您能否帮助我以正确的方式做到这一点。如果我能够从控制器中使用列表或数组，那将是很棒的。谢谢。

upd.change我的控制器，添加了json转换，但没有帮助。看起来脚本无法在我的页面上工作…更加困惑O_o

更新。这是我的工作代码：

控制器：

@RequestMapping(value = "/searchlastname", method = RequestMethod.GET, headers = "Accept=*/*")
public
@ResponseBody
List<String> searchLastName(@RequestParam("term") String query) {
    List<Clients> clientsList = clientsService.searchClient(new SearchClientEvent(query)).getClients();
    List<String> lastnameList = new ArrayList<>();
    System.out.println("Found clients size: " + clientsList.size());

    for (Clients clients : clientsList) {
        lastnameList.add(clients.getLast_name());
    }

    Collections.sort(lastnameList);
    return lastnameList;
}

脚本：

$(document).ready(function () {
    $("#lastNameAuto").autocomplete({
        source: 'clients/searchlastname'
    });
});

在jsp中：

<form class="form-horizontal" role="form" action="<c:url value="/clients/search"/>" method="get">
            <div class="input-group input-group-sm">
                <span class="input-group-addon"><spring:message code="label.enterClientInfo"/></span>

                <input class="form-control" type="search" id="lastNameAuto" name="query" required>

                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <spring:message code="label.searchClient"/>
                        </button>
                    </span>
            </div>

        </form>

希望它能帮助别人！;）

阅读 233

2020-06-10

共1个答案

一尘不染

根据您的更新，

您应该有一个模型类，并进行显式转换以发送json对象。gson您可以使用库，也可以通过发送列表来使用现有方法。

希望这可以帮助！！

2020-06-10