從asp.net和Ajax中的列表中刪除自動完成選擇的項目

Question

我面臨的最大問題是**請不要重復報告我的問題，因為我沒有在GOOGLE中獲得ASP.NET的答復。

我正在使用Web服務在asp.net中使用jquery自動完成文本框。 我的代碼

 $('input.txtE').autocomplete({ source: function (request, response) { $.ajax({ url: "WebServices.asmx/GetNames", type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", data: "{ 'txtInput' : '" + request.term + "','userName':'" + userName + "'}", dataFilter: function (data) { return data; }, success: function (data) { mydata = data.d; response($.map(data.d, function (item) { return { label: item.split('/')[0], val: item.split('/')[1] } })) }, error: function (result) { alert("Error"); } }); }, multiselect: false, minLength: 1, delay: 0, select: function (e, ui) { $(hfId).val(ui.item.val); } }); 

<input type="hidden" id="hfId"/>

而且我的API以數組格式返回數據

 ["Abhishek/128", "Abyss/71", "athansiah/53", "blvsian/138", "DesmondH/91", "destined2hold/62", "dnbdesigns/94", "Dvus_lotus/85", "gserranof/47", "Illusions/89", "isaacwu111/111", "js/39"]

如果選擇的用戶將其從自動完成列表中刪除，那么我們將無法再次選擇他。

請幫我把它做短。

Answer 1

嘗試使用jQuery從數組中刪除選定的值。

x = jQuery.grep(x, function(val) {return val != Item;});

Answer 2

制備

首先，您需要存儲設定值。 通過使用全局變量，隱藏的輸入控件或與該控件關聯的任意數據，這是可能的。 在下面的示例中，我創建一個與自動完成控件關聯的數組，然后將所選值存儲到該數組：

$('#my-control').autocomplete({
  create: function( e, ui ) {
    // initialize array
    $(this).data('selected', []);
  },
  select: function( e, ui ) {
    // store unique selected values
    var selected = $(this).data('selected');
    if(!~selected.indexOf(ui.item.value)) {
      selected.push(ui.item.value);
    }
  },

  // another options here

});

現在可以考慮將所選值用於列表過濾。

服務器端解決方案

最好的方法是在API服務器端過濾列表，因為這會減少傳輸的數據量。 只需使用data選項通過AJAX請求發送存儲的值：

var $control = $('#my-control');
$control.autocomplete({
  source: function (request, response) {
    $.ajax({

      // some AJAX options

      data: {
        term: request.term,
        selected: $control.data('selected') // send stored values
      }
    });
  },

  // some autocomplete options here

});

然后，您必須根據selected查詢字符串參數實現服務器端過濾。 例如

public class AutocompleteSourceController : ApiController
{
    [HttpGet]
    public JsonResult<IEnumerable<MyClass>> GetItems(
        [FromUri]string term, 
        [FromUri]int[] selected)
    {
        // Load data
        // Fliter by term substring
        // Exclude selected items
        // Return the result
    }
}

客戶端解決方案

另一種方法是使用success AJAX回調在客戶端過濾響應列表。 在我的示例中，我將使用偽造的在線REST API服務器 。 服務器忽略查詢字符串的term字段，因此我也必須在客戶端上實現它。

 $control = $('#my-input'); $control.autocomplete({ create: function(e, ui) { $(this).data('selected', []); }, source: function(request, response) { $.ajax({ url: "https://jsonplaceholder.typicode.com/users", type: "GET", dataType: "json", contentType: "application/json; charset=utf-8", success: function(data) { var items = data // filter by term .filter(function(user) { return ~user.name.toLowerCase().indexOf(request.term.toLowerCase()); }) // exclude stored selected values .filter(function(user) { return !~$control.data('selected').indexOf(user.id); }) // cast to an objects with label and value properties .map(function(user) { return { label: user.name, value: user.id } }); response(items); }, error: function(result) { alert("Error"); } }); }, multiselect: false, minLength: 1, delay: 0, select: function(e, ui) { e.preventDefault(); $ctrl = $(this); var selected = $control.data('selected'); if (!~selected.indexOf(ui.item.value)) { // store selected value selected.push(ui.item.value); // set label instead of value $ctrl.val(ui.item.label); } }, }); 

 <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <input id="my-input" type="text"> 

在輸入控件上鍵入L 第一項將是Leanne Graham ，選擇它。 然后清理輸入字段並再次輸入L ，下拉菜單中將沒有Leanne Graham 。 選擇Ervin Howell ，然后清理輸入字段並再次鍵入L 下拉菜單中將既沒有Leanne Graham也沒有Ervin Howell 。

如果只考慮當前選定的值，則可以僅存儲最新值而不是數組，並修改success回調和select事件處理程序。