jsView jQuery UI 小部件自动完成自定义数据和显示答案

【问题标题】：jsView jQuery UI widget autocomplete Custom data and displayjsView jQuery UI 小部件自动完成自定义数据和显示
【发布时间】：2018-07-27 13:36:19
【问题描述】：

我正在为每个调用 jQuery UI 自动完成小部件 API 的 jsviews-jqueryui-widgets API (https://www.jsviews.com/download/sample-tag-controls/jsviews-jqueryui-widgets.js) 初始化不同的 jQuery UI 自动完成小部件。这很好用！

但我想修改自动完成小部件的自定义数据和显示 (https://jqueryui.com/autocomplete/#custom-data)。

我想，我需要实现一个链接方法，但我不知道如何在jsView的API中实现它。

jsView 模板：

<script id="inputText" type="text/x-jsrender">
        <input type="text" data-link="{autocomplete value _source=~suggestionList}" />
</script>

链接方式：

.autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
        .appendTo( ul );
    };

jsviews-jqueryui-widgets API 的一部分

autocomplete: {
  baseTag: "widget",
  widgetName: "autocomplete",
  linkedElement: "*",
  elem: "input",
  setSize: true,
  options: function() {
    var tag = this;
    return {
      change: function(evt, ui) {
        if (ui.item) {
          tag.updateValue(ui.item.value);
          // If there is a selected item, update bound value on keydown.
          // (Alternatively can set trigger=false to update on change)
        }
      },
      select: function(evt, ui) {
        if (ui.item) {
          tag.updateValue(ui.item.value);
        }
      },
      focus: function(evt, ui) {
        return false;
      }
    };
  }
}

最好的方法是什么？

谢谢！

【问题讨论】：

请查看并提供一个最小、完整且可验证的示例：stackoverflow.com/help/mcve

标签： jquery jquery-ui jsviews

【解决方案1】：

一种方法是创建一个派生的{^{myAutocomplete ...}} 标记，它会覆盖 _renderItem 方法以及焦点和选择选项：

$.views.tags("myAutocomplete", {
  baseTag: "autocomplete",
  onBind: function(tagCtx) {
    this.baseApply(arguments);
    var widget = this.widget;
    widget._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
        .appendTo( ul );
    };
    widget.options.focus = function( event, ui ) {
      this.value = ui.item.label;
      // Other rendering code?
      return false;
    };
    widget.options.select = function( event, ui ) {
      this.value = ui.item.label;
      // Other rendering code, such as:
      // $( "#project-description" ).html( ui.item.desc );
      return false;
    };
  }
});

您可以选择仅覆盖 _renderItem 方法，并可选择覆盖各个实例上的选项：

$.views.tags("myAutocomplete", {
  baseTag: "autocomplete",
  onBind: function(tagCtx) {
    this.baseApply(arguments);
    var widget = this.widget;
    widget._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
        .appendTo( ul );
    };
  }
});

然后：

<input type="text"
 data-link="{myAutocomplete value _source=~suggestionList _focus=~focus _select=~select}" />

或

{^{myAutocomplete value _source=~suggestionList _focus=~focus _select=~select /}}

请参阅 JsViews 文档主题：Accessing widget options, events and methods。

【讨论】：