Question

关于同一主题的主题很少，但不完全满意我！

我想通过数据属性来定义自动填充的来源，如下所示：

<input data-behaviour='autocomplete' data-source='/path/to/source'>

我无法通过source方法以编程方式获取它：

$ ->
  $('[data-behaviour~=autocomplete]').autocomplete
    source: (req, resp) ->
      return $(this).data('source')

Here是一个与...无关的代码片段。

编辑：我发现的解决方法是通过create方法设置它：

$ ->
  $('[data-behaviour~=autocomplete]').autocomplete
    create: (event, ui) ->
      $(this).autocomplete( "option", "source", $(this).data('source') )

选中此snippet

但我真的不喜欢这种方法，我很确定可以做得更好

Answer 1

我不熟悉coffeescript; jQuery UI自动完成具有source选项，允许您制作一些自定义内容;在您的情况下，您可以使用request使用第三个选项（功能）并设置response参数。

功能：第三个变体，一个回调，提供最多灵活性，可用于连接任何数据源自动完成。回调有两个参数：一个请求对象，带有单个术语属性，指的是当前的值文字输入。例如，如果用户输入＆＃34; new yo＆＃34;在城市的领域，自动填充术语将等于＆＃34; new yo＆＃34;。响应回调，哪个需要一个参数：向用户建议的数据。这个数据应该根据提供的术语进行过滤，并且可以是任何一个上面描述的简单本地数据格式。这很重要提供自定义源回调以处理错误请求。即使您，也必须始终调用响应回调遇到错误。这可确保窗口小部件始终具有正确的状态。在本地过滤数据时，您可以使用内置$ .ui.autocomplete.escapeRegex函数。它会采取一个单一的字符串参数和转义所有正则表达式字符，产生结果安全传递给新的RegExp（）。

参考：http://api.jqueryui.com/autocomplete/#option-source

代码：

$ ->
  thisEl = $('[data-behaviour~=autocomplete]');
  $('[data-behaviour~=autocomplete]').autocomplete
    source: (req, resp) ->
      resp(thisEl.data('source'));

只是您必须实施过滤模式的示例。

演示：http://codepen.io/anon/pen/gjmHn

jquery自动完成来自数据属性的动态源

1 个答案: