如何使用jQuery-Autocomplete定制建议html

Question

我正在使用这里看到的jQuery-Autocomplete插件：https://github.com/devbridge/jQuery-Autocomplete

我正在尝试控制作为建议呈现的项目。默认情况下，autocomplete-suggestion如下所示：

<div class="autocomplete-suggestion" data-index="0">438</div>

我希望能够构建该项目，这样我就可以执行以下操作：

<div class="autocomplete-suggestion" data-index="0">
    <div class="autocomplete-suggestion-photo"></div>
    <div class="autocomplete-suggestion-title"></div>
</div>

我使用的是正在调用的beforeRender，只是没有生效，下面是代码片段：

beforeRender: function (container) {
  console.log(container)
  xx = '<div class="autocomplete-suggestion" data-index="1">TEST</div>';
  return xx;
},

你知道我做错了什么吗？

更新了下面的代码。想法是更改beforeRender中的容器，以完全自定义正在呈现的内容。这没有效果。

beforeRender: function (container) {
  console.log(container)
  container = '<div class="autocomplete-suggestion" data-index="1">TEST</div>';
  return container;
},

Answer 1

查看source，该插件只需调用beforeRender，然后显示容器：

if ($.isFunction(beforeRender)) {
  beforeRender.call(that.element, container, that.suggestions);
}

that.fixPosition();
container.show();

它不使用任何返回值。医生说：

beforeRender：在显示建议之前调用的function (container, suggestions) {}。您可以在显示建议DOM之前对其进行操作。

所以我认为你应该直接操作容器，比如：

beforeRender: function (container, suggestions) {
  container.find('.autocomplete-suggestion').each(function(i, suggestion){
   // suggestion.append(); suggestion.preppend(); suggestion.whatever()
  });
},

Answer 2

这是一个老问题，但也面临着类似的问题。我想在div中显示结果，而不是默认的下拉列表。我想在任何人有这样的需求的情况下更新解决方案。

首先，在beforeRender方法之前调用formatResult方法。此外，该插件还为容器添加了内联样式属性，使容器的位置变为绝对位置。

现在回到最初的问题，正如@T J在答案中提到的那样，该方法不使用返回值，因此我们必须在方法本身中对容器进行更改。这是我想出来的。

beforeRender: function (container) {
    
    var html = "";
    
    //get inner html of each of the suggestion
    container.find('.autocomplete-suggestion').each(function(i, suggestion){
        html = html + $(suggestion).html();
    });
    
    //append the html to the div where you want to display the results
    $("#auto-results").html(html);
    
    /*
    * remove the inline style from the container that makes the position absolute
    * and other styles
    */
    $(container).removeAttr("style");
    
    //empty the inner html of the container
    $(container).html("");
},

这样，就不会显示默认容器，但所有建议都会显示在我自己的容器div中。

请记住，单个建议样式是由formatResult方法处理的。

您可以使用相同的方式对容器进行您想要的更改。