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

准备

首先，您需要存储设置的值。通过在控件中使用全局变量，隐藏的输入控件或任意数据associated，这是可能的。在下面的示例中，我创建一个与自动完成控件关联的数组，然后将所选值存储到该数组：

$('#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回调在客户端过滤响应列表。在我的示例中，我将使用伪造的online REST API server。服务器忽略查询字符串的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事件处理程序。

从asp.net和Ajax中的列表中删除自动完成选择的项目

2 个答案:

准备

服务器端解决方案

客户端解决方案