从源

Question

我需要你的帮助。
我正在使用jquery auto complete，我想在选择后从自动完成选择中删除该项目。

这是我的代码。

$( "#js-news-categories" ).autocomplete({
        minLength: 0,  
        source: availableTags,
        multiselect: true,
        autoFocus: true,
        focus: function(event, ui ) {
            return false;
        },
    select: function(event, ui ) {                         
        $( "#js-news-categories" ).val("");
        var catItems = '<span class="c_item" id="c_item_'+ ui.item.id 
            +'"><input type="hidden" value="'+ ui.item.id +'"/>'
            + ui.item.value +'<span class="close">X</span></span>';
        $(".js-categories_select").append(catItems);         
            return false;        
        } 
    });

这是从自动完成框中选择项目并附加到div。 我想要做的是一旦项目添加到div，然后它应该从自动完成中删除。我得到了这个link。但我不能在我的案件中开展工作。请帮忙。

Answer 1

您可以使用grep()从数组中进行过滤。试试这个。

$("#js-news-categories").autocomplete({
  minLength: 0,
  source: function( request, response ) {
          // create filter function here
          response( $.grep(
            availableTags, function( obj,i) {
            var temp = $(".js-categories_select").data('values').split(',');
            return temp.indexOf(obj.id) === -1;
           })  );
        },
  multiselect: true,
  autoFocus: true,
  focus: function(event, ui) {
    return false;
  },
  select: function(event, ui) {

    $("#js-news-categories").val("");
    var catItems = '<span class="c_item" id="c_item_' + ui.item.id + '">     <input type="hidden" value="' + ui.item.id + '"/>' + ui.item.value + '<span class="close">X</span></span>';
    $(".js-categories_select").append(catItems);
   
    //add this for convenient in getting the value
    var x = $(".js-categories_select").data('values');
    $(".js-categories_select").data('values',x + ui.item.id + ',');
    return false;

  }
});

Answer 2

你的方法是正确的。您必须从availableTags中删除所选项目并初始化autocomplete 再次。 grep是一个过滤函数，它将根据您的条件返回数组中的元素

请在此处阅读：http://api.jquery.com/jquery.grep/

所以你可以这样做

  availableTags = jQuery.grep(availableTags, function(element) {
    return element.value != ui.item.value;
   });

这将从availableTags

中删除所选项目

var availableTags = [
 {
   id:1,
   value:"php"
 },
  {
   id:2,
   value:"java"
 },
  {
   id:3,
   value:"Asp.net"
 }
]

function triggerAutoComplete() {
    $( "#js-news-categories" ).autocomplete({
            minLength: 0,  
            source: availableTags,
            multiselect: true,
            autoFocus: true,
            focus: function( event, ui ) {
            return false;
            },
            select: function( event, ui ) {     

            availableTags = jQuery.grep(availableTags, function(element) {
            return element.value != ui.item.value;
           });
            triggerAutoComplete();

            $( "#js-news-categories" ).val("");
            var catItems = '<span class="c_item" id="c_item_'+ ui.item.id +'">     <input type="hidden" value="'+ ui.item.id +'"/>'+ ui.item.value +'<span class="close">X</span></span>';
            $(".js-categories_select").append(catItems);         
            return false;        

            } 
        });
}

triggerAutoComplete();

小提琴：http://jsfiddle.net/tintucraju/Ex3Rp/23/

<强>更新

根据您的评论，您可以通过将源更改为函数来避免使用额外的函数triggerAutoComplete()。阅读文档：http://api.jqueryui.com/autocomplete/#option-source

    source:function(request,response){
      response(availableTags);
    },

更新小提琴：http://jsfiddle.net/tintucraju/aecfhxxp/1/

Answer 3

尝试使用此代码

 $( "#js-news-categories" ).autocomplete({
            minLength: 0,  
            source: availableTags,
            multiselect: true,
            autoFocus: true,
            focus: function( event, ui ) {
            return false;
            },
            select: function( event, ui ) {  

            availableTags = jQuery.grep(availableTags, function(element) {
            return element.value != ui.item.value;
            });   
            $('#js-news-categories').autocomplete('option', 'source', availableTags);         

            $( "#js-news-categories" ).val("");
            var catItems = '<span class="c_item" id="c_item_'+ ui.item.id +'"><input type="hidden" value="'+ ui.item.id +'"/>'+ ui.item.value +'<span class="close">X</span></span>';
            $(".js-categories_select").append(catItems);    


            return false;        

            } 
            });