jQuery 空的自动完成列表

Question

我有 Thymeleaf 形式。

其中一个输入框是这样的：

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

我想用jQueryUI。在我的 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 控制器：

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

JpaRepository:

@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 数组，每个元素都有一个整数和一个字符串。在那个 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 的成功函数中创建该格式。您只需要使用 each 循环遍历 data ，然后将数组值推送到 JSON Array[=27 中的键值对中=] 然后将其传递给您的插件。

演示代码 :

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>

jQuery 空的自动完成列表

jQuery empty autocomplete list

java

jquery

jquery-ui