CODEWITHSUNDEEP
javascriptjqueryjsonautocompleteeasyautocomplete
user7242751
user7242751

Reputation: 21

jquery easy autocomplete url function

I'm hoping I can get some help on working with jquery easy autocomplete. I am trying to create a url function that calls an html page that has a javascript xmlrpc function, and returns a list of name in json format. All I get in the web console is:WARNING: Fail to load response data.

Query Page:

<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>

Easy Autocomplete page:

<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>

This is hosted on an IIS server, and I can't use php like the examples show for easy autocomplete. The page returns proper json as I have validated it, so I'm a little confused what it doesn't like it.

Upvotes: 1

Views: 2244

Answers (2)

Adwin
Adwin

Reputation: 119

You are using Duckduckgo search of easyAutocomplete.

Change your code as follows:

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

for other Ajax setting, read Ajax settings guide

Upvotes: 0

befabry
befabry

Reputation: 802

I had kind of the same problem if I understand correctly.

I wanted to load an array of data only once, which is not how easy autocomplete works. If you use the URL it will do requests once you type letters.

1) : Create an Easy AutoComplete function that load the settings (re-usable is 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) : Store the datas in a 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) Call your function in an input :

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

Upvotes: 1

Related Questions