如何在JQuery自动完成中使用XMLHttpRequest?

时间:2019-03-15 11:51:35

标签: javascript jquery json

我需要XMLHttpRequest的JQuery自动完成内的数据 这是我的XMLHttpRequest代码:

var jsonRequest = new XMLHttpRequest();
  jsonRequest.open('GET', path);
  jsonRequest.onload = function(){
     var a = jsonRequest.removeEventListener;
  }; jsonRequest.send();

此代码也可以使用,但是如何在JQuery自动填充内使用var a?

这是JQuery:

$('#tags').autocomplete({
source: function(request, response) {
  var data = a;
  var datamap = data.map(function(i) {
    return {
      label: i.serial + ' - ' + i.mac,
      value: i.serial + ' - ' + i.mac,
      desc: i.cpe_ip
    }
  });

  var key = request.term;

  datamap = datamap.filter(function(i) {
    return i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0;
  });

  response(datamap.slice(0, 15));
},
minLength: 1,
delay: 100

});

如果我将它与JSON-Data一起用于var数据,则可以正常工作。但是这样就行不通了。

thx为您提供帮助

现在我有了这个

$('#snmcAuto').autocomplete({
   source: function(request, response) {
     var jsonRequest = new XMLHttpRequest();
     jsonRequest.open('GET', path);
     jsonRequest.onload = function(data){
       response(JSON.parse(data));
     }; 
     
     var datamap = data.map(function(i) {
      return {
        label: i.serial + ' - ' + i.mac,
        value: i.serial + ' - ' + i.mac,
        desc: i.cpe_ip
      }
    });

     var key = request.term;
      
      datamap = datamap.filter(function(i) {
        return i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0;
      });
      
      response(datamap.slice(0, 15));
     jsonRequest.send();
   },
   minLength: 1,
   delay: 100
 });

这是最适合我的代码,是的,它不是最好的性能,但仍然很快。

 $('#snmcAuto').autocomplete({
         source: function(request, response) {
           
        var jqxhr = $.getJSON( path, function() {
        var data =  jqxhr.responseJSON;
           var datamap = data.map(function(i) {
             return {
               label: i.serial + ' - ' + i.mac,
               value: i.serial + ' - ' + i.mac,
               desc: i.cpe_ip
             }
           });
           var key = request.term;
           
           datamap = datamap.filter(function(i) {
             return i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0;
           });
       
           response(datamap.slice(0, 15));
           })
         },
     
       });;

1 个答案:

答案 0 :(得分:0)

要将远程数据源(由AJAX访问)用作自动完成数据的源,可以执行以下操作。关键是您必须在AJAX请求的“ onload”回调中将对自动完成的响应返回,以便它可以访问下载的数据。您还必须通过查询字符串将用户输入的搜索词传递给服务器。

$('#tags').autocomplete({
  source: function(request, response) {
    var jsonRequest = new XMLHttpRequest();
    jsonRequest.open('GET', path + "?term=" + request.term);
    jsonRequest.onload = function(data){
      response(JSON.parse(data.responseText));
    }; 
    jsonRequest.send();
  },
  minLength: 1,
  delay: 100
});