javascript - 在 jQuery 中分割项目

Question

Original Example

Failed Example

返回的数据如下:

var availableTags = [
    'ActionScript|AppleScript|Asp',
    'BASIC',
    'Clojure|C++|C|COBOL|ColdFusion',
    'Erlang',
    'Fortran',
    'Groovy',
    'Haskell',
    'Java|JavaScript',
    'Lisp',
    'Perl|PHP|Python',
    'Ruby',
    'Scala|Scheme',
];

如何在 renderItem 函数中将项目拆分为数组，并且当用户键入 PHP 时，它只会从“Perl|PHP|Python”返回 PHP？

这是我的代码:

$('#tags').autocomplete({
    source: availableTags,
    search: function(event, ui) {
        $('#wrapper').empty();
    },
})
.data('autocomplete')._renderItem = function(ul, item) {
    return $('<div class="element"></div>')
        .data('item.autocomplete', item)
    var smallchoice = item.label.split('|');                    
    $.each(smallchoice,function(j,smallchoice){
           $option = '<a href="#" >' + smallchoice+ '</a>'
         })

        .append($option)
        .appendTo($('#wrapper'));
};

Answer 1

这是您尝试执行的操作的示例。

.data('autocomplete')._renderItem = function(ul, item) {
  var inp = $("#tags").val();
  var items = item.label.split("|");
  for (var i = 0; i < items.length; i++) {
      index = items[i].toUpperCase().indexOf(inp.toUpperCase());
      if (index == 0 || index > 0) {
          item = items[i];
          return $('<div class="element"></div>')
          .data('item.autocomplete', item)
          .append('<a href="#">' + item + '</a>')
          .appendTo($('#wrapper'));
      }
  }
};

JSFiddle