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将被插入到input元素中。如果仅指定了一个属性，则它将用于两者，例如，如果仅提供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垫片或使用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;
  }
});

拆分数组元素

2 个答案: