如何在jQuery Autocomplete自动完成组件中添加自定义a标签？

错误原因 #

• jQuery UI Autocomplete的source配置项仅支持字符串数组、结构化对象数组或回调函数作为入参，你将jQuery的append操作返回的jQuery对象存入availableTags数组，组件无法识别对应格式，因此无法渲染内容。
• Autocomplete组件会自行管控下拉列表的渲染、显示/隐藏逻辑，每次触发搜索时都会清空原有列表内容，你手动插入的DOM元素会被组件默认逻辑直接清除。

正确实现方案 #

使用Autocomplete官方提供的_renderItem扩展方法自定义下拉项渲染逻辑，该方法就是为满足自定义列表项需求设计的，不会和组件原生逻辑冲突。

第一步：修改Autocomplete初始化代码 #

var availableTags = [];
$(document).ready(function(){
    $( "#search-product" ).autocomplete({
      source: availableTags,
      minLength: 0 // 可选配置，点击输入框就显示全量下拉列表可加该项
    }).autocomplete("instance")._renderItem = function(ul, item) {
      // 此处自定义渲染a标签内容、样式、属性均可
      return $("<li class='ui-menu-item' role='presentation'>")
        .append(`<a class="ui-corner-all" tabindex="-1">${item.name} - 售价：${item.price}</a>`)
        .appendTo(ul);
    };
});

注：如果使用的是jQuery UI 1.9以下的旧版本，将.autocomplete("instance")替换为.data("autocomplete")即可。

第二步：修正getItems函数逻辑 #

只需要把后端返回的产品数据按结构化格式存入availableTags，渲染逻辑完全交给上面的_renderItem处理即可，不需要手动操作下拉列表DOM：

function getItems(token,id) {  
     $.ajax({
        url: "/get/product/items",
        type: "POST",
        data: {
            _token: token,
            id:id,
        },
        success: (dataResult) => {
            availableTags.length = 0
            $.each(dataResult, function(index,products) {
               // 存入结构化数据，支持自定义扩展字段
               availableTags.push({
                 name: products.name,
                 price: products.price,
                 // 如需a标签跳转可加跳转链接字段
                 // detailUrl: products.detail_url
               });
            }); 
            // 可选：数据更新后主动触发下拉列表刷新
            $("#search-product").autocomplete("search", $("#search-product").val());
        },
    });
}

可选扩展：实现点击a标签跳转 #

如果需要自定义的a标签支持点击跳转，只需要修改_renderItem里的a标签代码，加上href属性即可：

.append(`<a href="${item.detailUrl}" target="_blank" class="ui-corner-all" tabindex="-1">${item.name} - 售价：${item.price}</a>`)

内容的提问来源于stack exchange，提问作者RoboPHP