4

我有一个这样的数组：

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

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

4

2 回答 2

4

根据自动完成文档，您可以将对象数组设置为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] 
     }
});
于 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 回答