Question

我使用的是jQuery-Autocomplete插件：https://github.com/devbridge/jQuery-Autocomplete

我试图控制正在呈现的项目作为建议。默认情况下，自动完成建议如下所示：

<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中显示结果，而不是默认下拉列表。如果有人有此要求，请考虑更新解决方法。

首先，在formatResult方法之前调用beforeRender方法。另外，该插件还会向容器添加内联样式属性，从而使容器的位置达到绝对位置。

现在回到原始问题，如答案中提到的@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方法处理的。

您可以用相同的方式对容器进行所需的更改。

如何使用jQuery-Autocomplete自定义建议html

2 个答案: