4

私はこのような配列を持っています:

var arr = ["1,JOAQUIN", "2,BERNARDINO", "3,MODOC", "4,MADERA"];

のように個別に分割したい

1 JOAQUIN
2 BERNARDINO
3 MODOC 
4 MADERA

私がしようとしているのは：

1. jQuery UI オートコンプリート リストに番号 (最初のインデックス) を表示し
、別のテキスト ボックスにそれぞれの名前を表示します。

ここに私のコードがあります、

var arr = ["1,JOAQUIN", "2,BERNARDINO", "3,MODOC", "4,MADERA"];
$('input').autocomplete({
    source: json,
    select: function(event, ui) { 
        var str = ui.item.value.split(',');
        var lastIndex = str.length -1;
        $('#two').val(str[lastIndex]);     //ACHEIVED 2nd   
    }
});

しかし、私は2番目のポイントを取得し、最初の質問の解決策を見つけるのに苦労しています.

ここにJSFiddleがあります

あなたの提案を共有し、正しい方向に向けてください。

4

2 に答える 2

4

オートコンプリートのドキュメントによると、オブジェクトの配列をプロパティとして設定できsourceます。

labelプロパティが提案メニューに表示されます。ユーザーが項目を選択するvalueと、入力要素に挿入されます。プロパティを 1 つだけ指定すると、両方に使用されます。たとえば、valueプロパティのみを指定するvalueと、 も として使用されますlabel。

$('input').autocomplete({
    source: arr.map(function(elem) {
              return { 
                 'label': elem.split(',')[0], 
                 'value': elem.split(',')[1] 
              }
    }),
    select: function(event, ui) { 
        $('#two').val(ui.item.value);    
        return false;
    }
});

http://jsfiddle.net/ETwtF/

古いバージョンの IE は配列のオブジェクト メソッドをサポートしていないことに注意してください。代わりに.map()ES5 シムを使用するか、jQuery$.map()ユーティリティ関数を使用できます。

$.map(arr, function(_, elem) {
     return { 
         'label': elem.split(',')[0], 
         'value': elem.split(',')[1] 
     }
});
于 2013-09-17T08:13:56.010 に答える
1

return false;コードに追加するだけ

フィドル

<input type='text' id="one" />
<input type='text' id="two" />  

var json = ["1,JOAQUIN", "2,BERNARDINO", "3,MODOC", "4,MADERA"];
$('input').autocomplete({
  source: json,
  select: function(event, ui) { 
      var str = ui.item.value.split(',');
      var lastIndex = str.length -1;
      $('#one').val(str[0]);
      $('#two').val(str[lastIndex]);     //ACHEIVED 2nd   
      return false;
  }
});
于 2013-09-17T08:18:52.497 に答える