如何使用jQuery-Autocomplete自定义建议html [英] How to customize the suggestion html with jQuery-Autocomplete

问题描述

我正在使用此处显示的jQuery-Autocomplete插件: https://github.com/devbridge/jQuery自动完成

I'm using the jQuery-Autocomplete plugin seen here: https://github.com/devbridge/jQuery-Autocomplete

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

I'm trying to control the item being rendered as a suggestion. By default, the autocomplete-suggestion looks like the following:

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

我希望能够制造该物品，所以我可以做类似的事情:

I'd like the ability to build that item so I could do something like:

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

我正在使用被调用的beforeRender，只是没有生效，这是代码段:

I'm using beforeRender which is being called, just not taking effect, here is the snippet:

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

有什么想法我在做什么错吗?

Any ideas what I'm doing wrong?

下面的更新代码.想法是在beforeRender中更改容器以完全自定义正在渲染的内容.这没有效果.

Updated code below. Idea being change container in beforeRender to have full customization of what is being rendered. This had no effect.

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

推荐答案

查看

Looking at the source, the plugin just invokes beforeRender and then shows the container:

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

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

它不使用任何返回值.文档说:

It doesn't make use of any return values. And the docs says:

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

beforeRender: function (container, suggestions) {} called before displaying the suggestions. You may manipulate suggestions DOM before it is displayed.

所以我认为您应该直接操作容器，例如:

So I think you're supposed to manipulate the container directly, something like:

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

这篇关于如何使用jQuery-Autocomplete自定义建议html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！