2

我在修改 jQuery UI 自动完成（自定义数据和显示）时遇到问题。首先，如何让 source 选项调用多个数组。其次，能够检测自动完成结果来自哪个数组并在 if 语句中使用它。

我会尽量讲清楚，因为我是 jQuery 的新手……任何指导将不胜感激！

更完整的代码示例：http ://codepen.io/seejaeger/pen/iqbke

概述：

  1. 声明并连接 2 个本地数组作为源
  2. 跟踪建议结果来自哪个数组
  3. 使用 if 语句根据其父数组显示不同的输出

每个数组项都有属性：value,,,labeldesc

我特别注意，desc因为它被用作不可搜索的数据，并
提供输出两种不同格式结果的能力。见下文：

第一个数组

var funds = [
  {
    value: "fundtest",
    label: "Fund Name Test", //searchable
    desc: "(Ticker)", // non-searchable
  },
  {
    value: "fundtest2",
    label: "Fund Name Test 2", //searchable
    desc: "(Ticker)", // non-searchable
  }
];

第二个数组

var tickers = [
  {
    value: "tickertest",
    label: "(Ticker Test)", //searchable
    desc: "Fund Name", //non-searchable
  },
  {
    value: "tickertest2",
    label: "(Ticker Test)", //searchable
    desc: "Fund Name", //non-searchable
  }
];

输出

如果搜索建议来自funds数组，则输出：

item.label + " " + item.desc

如果搜索建议来自tickers数组，则输出：

item.desc + " " + item.label

注意它们是如何交换的？

不同的 HTML 输出结构将允许将两个结果
输出到屏幕上：“基金名称（股票代码）”

更新

第 1 部分和第 2 部分现已解决。
第 3 部分仍有一些问题。
一旦我解决它，最终会发布答案（除非有人神奇地插话）。

非常感谢 TR 的指导。

在此处查看此作品的最新版本：http:
//codepen.io/seejaeger/pen/iqbke

4

1 回答 1

1

解决这个问题的关键因素是：

  • 添加一个类似的键origin（如果使用循环来附加这个键会更优雅，我可能会在更新中添加它。）

  • 将两个数组连接为一个，以便可以将其读取为source

  • 在函数内清除自动完成数据的来源，并基于if-statement该函数以特定方式输出结果.dataoriginorigin

工作演示：http ://codepen.io/seejaeger/pen/iqbke

--

$(function() {

  var fund = [
    {
      value: "fundtest",
      label: "Fund Name Test", //searchable
      desc: "(ticker)", // non-searchable
      origin: "fund", // prefer to eliminate duplication
    },
    {
      value: "fundtest2",
      label: "Fund Name Test 2", //searchable
      desc: "(ticker)", // non-searchable
      origin: "fund", // prefer to eliminate duplication
    }
  ];

  var ticker = [
    {
      value: "tickertest",
      label: "(ticker test)", //searchable
      desc: "Fund Name", //non-searchable
      origin: "ticker", // prefer to eliminate duplication
    },
    {
      value: "tickertest2",
      label: "(ticker test 2)", //searchable
      desc: "Fund Name", //non-searchable
      origin: "ticker", // prefer to eliminate duplication
    }
  ];

  var suggest = fund.concat(ticker);

  $( "#project" ).autocomplete({  
    minLength: 2,  
    source: suggest, 
    focus: function( event, ui ) { 
      $( "#project" ).val( ui.item.label );
      return false;
    },
    select: function( event, ui ) {
      $( "#project" ).val( ui.item.label );
      $( "#project-id" ).val( ui.item.value );
      // $( "#project-description" ).html( ui.item.desc );
      // $( "#project-origin" ).html( ui.item.origin );

      return false;
    }
  })

 .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
      if ( item.origin == 'fund') {
          return $( "<li>" )
          .append( "<a>" + item.label + " " + item.desc + "</a>" ) 
          .appendTo( ul );
      }
      else {
          return $( "<li>" )
          .append( "<a>" + item.desc + " " + item.label + "</a>" ) 
          .appendTo( ul ); 
          }
  }

});
于 2013-07-12T15:08:26.790 回答