拆分数组的元素

Question

我有一个这样的数组：

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

我想像这样单独拆分它

1 JOAQUIN
2 BERNARDINO
3 MODOC 
4 MADERA

我正在尝试的是：

1.在 jQuery UI 自动完成列表中显示数字（第一个索引）
2.以及它们各自的名称在另一个文本框中。

这是我的代码，

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

但是我得到了我的第二点并且努力为我的第一个问题找到解决方案。

这里是JSFiddle

请分享您的建议并为我指明正确的方向。

Answer 1

根据autocomplete 文档，您可以将对象数组设置为source 属性。

label 属性显示在建议菜单中。当用户选择一个项目时，value 将被插入到输入元素中。如果只指定了一个属性，它将用于两者，例如，如果您只提供 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 不支持 Array 的对象 .map() 方法，您可以使用 ES5 shim 或使用 jQuery $.map() 实用函数来代替：

$.map(arr, function(_, elem) {
     return { 
         'label': elem.split(',')[0], 
         'value': elem.split(',')[1] 
     }
});

Answer 2

只需将return false; 添加到您的代码中

Fiddle

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