javascript - 搜索在 jquery 自动完成中不起作用

Question

我正在使用 JQuery 自动完成功能。数据源是动态的。在搜索字符(例如:alex)时，它会返回所有数据。我的代码是，

$('#autocomplete').autocomplete({
  position: {
    my: "right top",
    at: "right bottom"
  },
  source: function(request, response) {
    $.ajax({
      type: "POST",
      url: apiurl + "apiv2/getUsers",
      data: {
        cust_id: localStorage.getItem("cust_id"),
        user_type: $("#to_role").val()
      },
      success: function(data1) {
        var parsedJson = $.parseJSON(data1);
        response($.map(parsedJson.response.data, function(item) {
          return {
            label: item.name,
            value: item.id
          }
        }));
      }
    });
  },
  select: function(event, ui) {
    $('#searchval').val(ui.item.value);
    $('#autocomplete').val(ui.item.label);

    return false; // Prevent the widget from inserting the value.
  },
  focus: function(event, ui) {
    $("#autocomplete").val(ui.item.label);
    return false; // Prevent the widget from inserting the value.
  },
});
$('#autocomplete').on('autocompleteselect', function(e, ui) {
  getUsersData(ui.item.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">


<input id="autocomplete" class="form-control" placeholder="Select User">
<input type="hidden" id="searchval" name="searchval" class="form-control">

我必须显示我搜索过的确切数据。如何解决这个问题？请帮助我。

提前致谢

Answer 1

如果您的 api 服务器没有过滤器选项，那么您需要在本地实现它

if (!RegExp.escape) {
  RegExp.escape = function(value) {
    return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
  };
}

//to mock the ajax response
var parsedJson = {
  response: {
    data: [{
      id: 1,
      name: 'Abc'
    }, {
      id: 2,
      name: 'cde'
    }, {
      id: 3,
      name: 'efg'
    }, {
      id: 4,
      name: 'ghi'
    }, {
      id: 5,
      name: 'jkl'
    }, {
      id: 6,
      name: 'aFZ'
    }]
  }
}

$('#autocomplete').autocomplete({
  position: {
    my: "right top",
    at: "right bottom"
  },
  source: function(request, response) {

    //replace the contents of the ajax success handler to do local filter
    var regex = new RegExp(RegExp.escape(request.term), "i");
    var recs = $.grep(parsedJson.response.data, function(obj) {
      return regex.test(obj.name)
    });
    response($.map(recs, function(item) {
      return {
        label: item.name,
        value: item.id
      }
    }));


  },
  select: function(event, ui) {
    $('#searchval').val(ui.item.value);
    $('#autocomplete').val(ui.item.label);

    return false; // Prevent the widget from inserting the value.
  },
  focus: function(event, ui) {
    $("#autocomplete").val(ui.item.label);
    return false; // Prevent the widget from inserting the value.
  },
});

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

<input id="autocomplete" class="form-control" placeholder="Select User">
<input type="hidden" id="searchval" name="searchval" class="form-control">

注意:这可能是一个昂贵的实现，因为您要获取每个事件的所有内容，您可以尝试在本地缓存 ajax 响应以提高性能