2

jQuery UI オートコンプリート (カスタム データと表示) の変更に問題があります。まず、source オプションで複数の配列を呼び出す方法。2 つ目は、オートコンプリートの結果がどの配列からのものかを検出し、if ステートメントで使用できるようにすることです。

私はjQueryが初めてなので、できるだけ明確にしようとします...どんなガイダンスも大歓迎です!

より完全なコード例: http://codepen.io/seejaeger/pen/iqbke

概要:

  1. 2 つのローカル配列をソースとして宣言して連結する
  2. 提案結果がどの配列から来たかを追跡する
  3. if ステートメントを使用して、親配列に基づいて異なる出力を表示する

各配列項目には次のプロパティがあります: value、label、desc

desc検索不可能なデータとして使用され、
2 つの異なる形式の結果を出力する機能を提供するため、特に注意を払っています。下記参照：

最初の配列

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

2 番目の配列

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(ループを使用してこのキーを追加すると、よりエレガントになります。更新時にこれを追加する可能性があります。)

  • 両方の配列を 1 つに連結して、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 に答える