如何删除自动完成中的一个特定值？

Question

＆＃13;

＆＃13;

$(document).on("click","#Id",function(){
	var data = [
			{ value: "AL", label: "Alabama" },
			{ value: "AK", label: "Alaska" },
			{ value: "AZ", label: "Arizona" },
			{ value: "AR", label: "Arkansas" },
			{ value: "UT", label: "Utah" },
			{ value: "VT", label: "Vermont" },
			{ value: "VA", label: "Virginia" },
			{ value: "WI", label: "Wisconsin" },
			{ value: "WY", label: "Wyoming" }
		];

$("#Id").autocomplete({
  minLength: 0,
  source: data,
  select: function( event, ui ) 
  {
    alert(ui.item.label);
  },
})
.data("ui-autocomplete")._renderItem = function( ul, item ) 
{
  if (item.label != "Virginia") {
    return $( "<li>" )
      .append( "<a>" + item.value + "<br>" + item.label + "</a>" )
      .appendTo( ul );
  }
};
});

＆＃13;

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<input type="test" id="Id">

＆＃13;

＆＃13;

＆＃13;

这是我的示例代码，如果我使用弗吉尼亚我得到空行，但我需要输出为空。 任何人都可以解决我的问题并为我提供解决方案

Answer 1

试试这个：

$("#Id").data("ui-autocomplete")._renderItem =  function( ul, item ) 
   {
    if(item.desc != "test"){
     return $( "<li>" )
     .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
     .appendTo( ul );
    }
   };

而不是uiAutocomplete使用ui-autocomplete

Answer 2

查看data上的#Id。看起来它存储在autocomplete。

下

所以，如果你已经打过电话了

$("#Id").autocomplete({
   source: data,
   etc : etc
});

然后你可以打电话： -

$("#Id").data('autocomplete')._renderItem = function(ul, item) {
    if (item.value != "test") {
      return $("<li>")
        .append("<a>" + item.label + "<br>" + item.desc + "</a>")
        .appendTo(ul);
    }
};

或者您可以实例化并设置_renderItem，如： -

 $("#Id").autocomplete({
    source: data
  }).data('autocomplete')._renderItem = function(ul, item) {
    if (item.value != "test") {
      return $("<li>")
        .append("<a>" + item.label + "<br>" + item.desc + "</a>")
        .appendTo(ul);
    }
  };

<强>更新

data下的jQueryUI存储自动填充的不同版本看起来不同，因为与我使用的版本相比，您的代码段不同（autocomplete vs ui-autocomplete ）。

空行的问题是ul周围的边框。自动填充认为具有要显示的值的位置，但正如您所说的不在自动填充列表中呈现唯一值，则ul仍然具有边框。删除ul周围的边框将修复。请参阅下面的代码： -

var data = [{
  value: "AL",
  label: "Alabama"
}, {
  value: "AK",
  label: "Alaska"
}, {
  value: "AZ",
  label: "Arizona"
}, {
  value: "AR",
  label: "Arkansas"
}, {
  value: "UT",
  label: "Utah"
}, {
  value: "VT",
  label: "Vermont"
}, {
  value: "VA",
  label: "Virginia"
}, {
  value: "WI",
  label: "Wisconsin"
}, {
  value: "WY",
  label: "Wyoming"
}];

$("#Id").autocomplete({
    minLength: 0,
    source: data,
    select: function(event, ui) {
      alert(ui.item.label);
    },
  })
  .data("ui-autocomplete")._renderItem = function(ul, item) {
    if (item.label != "Virginia") {
      return $("<li>")
        .append("<a>" + item.value + "<br>" + item.label + "</a>")
        .appendTo(ul);
    }
  };

.ui-autocomplete {
  border: 0 !important;
}

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<input type="test" id="Id">