Question

我希望能在使用jquery easy autocomplete方面得到一些帮助。我正在尝试创建一个url函数，该函数调用具有javascript xmlrpc函数的html页面，并返回json格式的名称列表。我在Web控制台中获得的是：警告：无法加载响应数据。

查询页面：

<html>
<script src="./js/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="./js/jquery.xmlrpc.js" type="text/javascript" ></script>
<body>

<p id="display"></p>
</body>

<script>
$(document).ready(function() {
    var url = "https://url.to.my.api/nameapi";
    $.xmlrpc({
        url: url,
        methodName: 'API.FullNameQuery',
        success: function(response, status, jqXHR) { 
            var resp = response + '';
            document.getElementById('display').innerHTML = resp;
        },
            error: function(jqXHR, status, error) { console.log("Error getting information:" + error) }
    });
});
</script>
</html>

简易自动填充页面：

<html>
<script src="./js/jquery-3.1.1.min.js" type="text/javascript" ></script>
<script src="./js/jquery.easy-autocomplete.min.js"></script>
<link rel="stylesheet" href="css/easy-autocomplete.min.css"> 
<link rel="stylesheet" href="css/easy-autocomplete.themes.min.css">
<body>

<input id="inputOne" placeholder="Full Name" />
<input id="inputTwo" placeholder="netID" />
</body>

<script>
$(document).ready(function() {
var resp;
var options = {
    url: function(phrase) { 
        return phrase !== "" ? 
"https://url.to.my.api/get-people.html" : 
"https://url.to.my.api/get-people.html";
    },

    getValue: "fullName",
    ajaxSettings: {
        dataType: "json"
    },
    requestDelay: 300,
    theme: "blue-light",
    list: {
        maxNumberOfElements: 200,
        match: {
            enabled: true
        }
    }
};
$("#inputOne").easyAutocomplete(options);
});
</script>
</html>

这是在IIS服务器上托管的，我不能像示例show那样使用php来轻松实现自动完成。页面返回正确的json，因为我已经验证了它，所以我有点困惑它不喜欢它。

Answer 1

如果我理解正确，我会遇到同样的问题。

我想加载一个数据只有一次，这不是自动完成的简单方法。如果您使用该URL，则会在您输入字母后执行请求。

1）：创建一个Easy AutoComplete功能，加载设置（可重复使用是dope）：

function autoComplete(data_src) {
    return {
        data: loadManufacturer(data_src),
        getValue: "name",
        theme: "bootstrap",
        list: {
            match: {
                enabled: true
            },
            showAnimation: {
                type: "fade", //normal|slide|fade
                time: 200,
                callback: function () {}
            },

            hideAnimation: {
                type: "slide", //normal|slide|fade
                time: 200,
                callback: function () {}
            }
        }
    };
}

2）：将数据存储在var

中

function loadManufacturer(url) {
    var tmp = null;
    $.ajax({
        'async': false,
        'type': "GET",
        'global': false,
        'dataType': 'json',
        'url': url,
        'success': function (data) {
            tmp = data;
        }
    });
    return tmp;
}

3）在输入中调用您的函数：

$("#search_product_manufacturer").easyAutocomplete(
        autoComplete(
                $("#search_product_manufacturer").attr('data-src')
                )
        );

Answer 2

您使用的是Duckduckgo search中的easyAutocomplete。

如下更改代码：

var options = {
  .....
  ajaxSettings: {
    data: {
      dataType: "jsonp"
    }
  },
  .....
}

对于其他Ajax设置，read Ajax settings guide

jquery easy autocomplete url功能

2 个答案: