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

Question

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

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

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

js视图模板：

<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;
      }
    };
  }
}

最好的方法是什么？

谢谢！

Answer 1

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

$.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。

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

jsView jQuery UI widget autocomplete Custom data and display

jquery

jquery-ui

jsviews