使用来自远程 JSON 的多个值的 Jquery 自动完成

Question

我想使用autocomplete()-plugin 选择多个值。我确实从远程 JSON 文件收到的值。到目前为止，我可以获得 1 个值，但之后它失败了。我的目标是选择多个值并存储 ID，以便稍后发布这些值。

到目前为止，我有：

<input type="text" id="featured" autocomplete="on"></input>
<input type="hidden" value="" name="artist_id">

function split( val ) {
    return val.split( /,\s*/ );
}

function extractLast( term ) {
    return split( term ).pop();
}

$("#featured").bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) {
    event.preventDefault();
}}).autocomplete({
    minLength: 0,
    source: function( request, response ) {
        $.ajax({
            url: App.APIO+'/i/search/artist?name='+request.term+'&featured=true',
            dataType: "json",
            success: function(data) {
                var result = $.map(data.data, function(artist) {
                    return {value: artist.name, label: artist.name, artist_id: artist.artist_id};
                });
                response( result );
                }
        });
    },
    focus: function() {
    // prevent value inserted on focus
    return false;
    },              
    select: function(event, ui) {
        var item = split( this.value );
        // remove the current input
        item.pop();
        // add the selected item
        item.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        item.push( "" );
        this.value = item.join( ", " );
        return false;
        $('[name="artist_id"]').val(ui.item.artist_id); // somehow insert the artist_id here
    }
 });

现在我只能输入 1 个值并选择它，例如显示“Lady Gaga”，但之后我无法输入任何内容，例如没有任何反应。我可以在我的网络选项卡中看到它尝试加载

 /artist?name=ladygaga%20%b&featured=true 

如果我在选择第一个值后输入“b”...

那么我做错了什么，有人可以帮助我吗...

Answer 1

//首先，将json数据填入变量“sourceList”

var sourceList = $.ajax //to fetch the data

//创建一个全局变量用于访问选定的值

var selectedItems= [];

//定义多选自动完成文本框如下：

$("#inputID")
.bind("keydown", function(event) {// don't navigate away from the field on tab when selecting an item
  if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
      event.preventDefault();
  }
})
.bind("blur", function(event) {
  //var $autoCompleteInstance = $(this).autocomplete("instance");
  var selectedObjects = [], currentText = $(this).html();
  //if ($autoCompleteInstance.term !== undefined && $autoCompleteInstance.term !== "") {
  if (currentText !== undefined && currentText !== "") {
      $.each(currentText.split(","), function(index, currentValue) {
          var temp = $.grep(sourceList, function(current) {
              return current.name === currentValue.trim();
          });
          $.merge(selectedObjects, temp);
      });
      selectedItems = selectedObjects;
      var valueField = [], textField = [];
      $.each(selectedItems, function(i, e) { valueField.push(e.valueField) }); //Resource_Id
      $.each(selectedItems, function(i, e) { textField.push(e.textField) });
      this.value = valueField.join(", ");
      $(this).attr("value", valueField.join(", "));
      this.innerHTML = textField.length > 0 ? textField.join(", ") + ", " : "";
  }
  else {
      this.innerHTML = this.value = ""; $(this).attr("value", "");
      selectedItems = [];
  }
})
.autocomplete({
  minLength: 0,
  source: function(request, response) {
      // delegate back to autocomplete, but extract the last term
      response($.ui.autocomplete.filter(sourceList, extractLast(request.term)));
  },
  focus: function() {
      // prevent value inserted on focus
      return false;
  },
  select: function(event, ui) {
      selectedItems.push(ui.item);
      var valueField = [], textField = [];
      $.each(selectedItems, function(i, e) { valueField.push(e.valueField) }); //Resource_Id
      $.each(selectedItems, function(i, e) { textField.push(e.textField) });
      this.value = valueField.join(", ");
      $(this).attr("value", valueField.join(", "));
      this.innerHTML = textField.join(", ") + ", ";
      event.preventDefault();
      $(this).focus();
      placeCaretAtEnd(document.getElementById("attendees"));
      //return false;
  }
})
.data("ui-autocomplete")._renderItem = function(ul, value) {
  return $("<li></li>").data("item.autocomplete", value).append('<span value=' + value.ValueField + '>' + value.TextField + '</span>').appendTo(ul); //Resource_Id
};

希望这会有所帮助:)