jQuery 空自动完成列表

Question

我有一个 Thymeleaf 表格。

输入字段之一是这样的：

            <input type ="text" id="customer" class="floatLabel" name="customer" th:field = "*{customer.idCustomer}">
            <label for="customer">Customer</label>

我想使用 jQuery UI。 在我的 Java 应用程序中，它可以正常工作，并且应用程序会发送 JSON 的正确值。 但是我的自动建议列表是空的。

我在我的 html 头部部分包含了一个 css 库，并在正文部分的底部包含了几个脚本库。

图书馆是：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

jQuery 代码：

<script>
     $("#customer").autocomplete({
      source: function( request, response ) {
       
       $.ajax({
        url: "/search_customer",
        type: 'post',
        dataType: "json",
        data: {
         search: request.term
        },
        success: function( data ) {
         response( data );
        }
       });
      },
      select: function (event, ui) {
       // Set selection
       $('#customer').val(ui.item.value); // save selected id to input
       $('#customer').val(ui.item.label); // display the selected text
       return false;
      }
     });

Java controller：

@PostMapping("/search_customer")
@ResponseBody
public List<Object[]> searchTerm(@RequestParam(name = "search", required = false) String searchTerm)
{
    List<Object[]> customers = customerDAO.getCustomers(searchTerm);
    
    return customers;
}

Jpa存储库：

@Repository
public interface ICustomerRepository extends JpaRepository<CustomerDTO, Integer>
{
    @Query(value = "SELECT c.idCustomer, c.ingameName FROM CustomerDTO c WHERE c.ingameName LIKE :term%")
    public List<Object[]> findCustomersAutocomplete(String term);
}

所以，一切正常，我得到 JSON 数组，每个元素都有一个 integer 和一个字符串。 在那个 thymeleaf 输入字段中，我希望标签是字符串“ingameName”，值（用户不应该看到）是 idCustomer。

我收到的 JSON 如下所示：

[[1, "customer1"], [3, "Customer2"]]
0: [1, "customer1"]
0: 1
1: "customer1"
1: [3, "Customer2"]
0: 3
1: "Customer2"

所以我希望标签是 customer1 和 Customer2 并且应该保存的值是 1 或 3。但我不知道如何告诉 jQuery UI 什么是 label 以及什么是 id？

我遵循了本教程：

https://makitweb.com/jquery-ui-autocomplete-with-php-and-ajax/

Answer 1

由于您从后端（控制器）接收的数据不是自动完成插件接受的格式，因此您可以在 ajax 的成功 function 中创建该格式。 您只需要使用每个循环遍历您的data ，然后在JSON 数组中的键值对中推送数组值，然后将其传递给您的插件。

演示代码：

 var data = [ [1, "Customer1"], [3, "Customer2"] ]; $("#customer").autocomplete({ source: function(request, response) { /*$.ajax({ //some codes success: function( data ) {*/ var json_array = []; //create format like autocompltee $(data).each(function(i, val) { //create obj and push value in main_array json_array.push({ "label": val[1], "value": val[0] }) }) console.log(json_array) response(json_array); /* } });*/ }, select: function(event, ui) { $('#customer').val(ui.item.label); $('#ids').val(ui.item.value); return false; } });

 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <input type="text" id="customer" class="floatLabel" name="customer"> <input type="text" id="ids"> <label for="customer">Customer</label>