Question

我正在根据jsviews-jqueryui-widgets API（https://www.jsviews.com/download/sample-tag-controls/jsviews-jqueryui-widgets.js）初始化不同的jQuery UI autocomplete-widgets，它正在调用jQuery UI autocomplete窗口小部件API。效果很好！

但是我想修改自定义数据并显示自动完成小部件（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;
      }
    };
  }
}

最好的方法是什么？

谢谢！

Answer 1

一种方法是创建一个派生的{^{myAutocomplete ...}}标记，该标记将覆盖_renderItem方法以及focus和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小部件自动完成自定义数据并显示

1 个答案: