Populate jQuery AutoComplete from API using AJAX in ASP.Net MVC

wisswiss...

SOLVED CLOSED ACTIVE ANSWERED
User: wisswiss143
Posted: on Aug 23, 2023 07:55 AM
Forum: ASP.Net MVC
Answer: 1
Views: 1368
Sample Code: Download

Hello,

I have a form created with ASP.NET MVC.

I have field like "Address 1 / Address 2/ Country/ Zip Code/ City.

When entering text in address field 1, it will be necessary to do an autocomplete according to the list returned by the API and by selecting an element, it allows me to fill in the other fields mentioned above.

JSON IN API, i pass the code country and the address entered

{
    "address": "20 avenue",
    "country": "BE"
}

JSON OUT

{
    "error": 0,
    "error_desc": null,
    "location_list": [
        {
            "address": "AVENUE DE L HELIPORT 20",
            "postcode": "1000",
            "city": "BRUXELLES",
            "country": "BE"
        },
        {
            "address": "AVENUE DES ARTS 20",
            "postcode": "1000",
            "city": "BRUXELLES",
            "country": "BE"
        },
        {
            "address": "RUE DU PONT DE L AVENUE 20",
            "postcode": "1000",
            "city": "BRUXELLES",
            "country": "BE"
        },
        {
            "address": "AVENUE LEGRAND 20",
            "postcode": "1000",
            "city": "BRUXELLES",
            "country": "BE"
        },
        {
            "address": "AVENUE LIVINGSTONE 20",
            "postcode": "1000",
            "city": "BRUXELLES",
            "country": "BE"
        }
    ]
}

I want to display informations into location_list !!

<div class="group-input has-feedback has-feedback-left">
<input type="text" oninput="allCaps(this)" class="js-addr js-addr-line1 form-control input-addr input-lg"
    autocomplete="chrome-off" id="address1" required="required" ></div>

$('#address1').autocomplete({
    source: function (request, response) {
        var req = {
            address: $("#address1").val(),
            country: $("#addr-country-code").val()
        };
 
        $.ajax({
             type: 'POST',
             dataType: 'json',
             url: glbBaseUrl + "/search_address",
             data: req,
             success: function (result) {                      
                 console.log("RES => ", result );
                 //json => {"location_list":[{"address":"20 AVENUE THIERS","postcode":"33100","city":"BORDEAUX","country":"FR"},{"address":"20 AVENUE CRAMPEL","postcode":"31400","city":"TOULOUSE","country":"FR"},{"address":"20 AVENUE DAUMESNIL","postcode":"75012","city":"PARIS","country":"FR"},{"address":"20 AVENUE BOLLEE","postcode":"72000","city":"LE MANS","country":"FR"},{"address":"20 AVENUE PASTEUR","postcode":"49100","city":"ANGERS","country":"FR"},{"address":"20 AVENUE RUBILLARD","postcode":"72000","city":"LE MANS","country":"FR"},{"address":"20 AVENUE CYRNOS","postcode":"06100","city":"NICE","country":"FR"},{"address":"20 AVENUE DELPHINE","postcode":"06100","city":"NICE","country":"FR"},{"address":"20 AVENUE LAMARTINE","postcode":"31100","city":"TOULOUSE","country":"FR"},{"address":"20 AVENUE MOZART","postcode":"75016","city":"PARIS","country":"FR"}],"error":0,"error_desc":null}
                 var test = $.map(resp, function (obj) {
                 // what should i do write in this section get location_list and display this list
             });
            },
            error: function (resultat, statut, erreur) {
            console.log(resultat, statut, erreur);
        }
        });
    }
});

[HttpPost]
public clsSearchaddressResponse search_address(clsSearchaddressRequest req)
{
    //req.data = req.url;
    req.address = req.address;
    req.country = req.country;
    return _cprWS.search_address(req);
}

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

1 3

Reply
ANSWER
User: dharmendr
Replied: on Aug 24, 2023 12:13 AM
Modified: on Sep 11, 2023 02:31 AM
Report

Hi wisswiss143,

Refer below sample.

JSON File URL

The following JSON file will be used in this sample.

https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <input type="text" id="txtName" />
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
    <link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("[id*=txtName]").autocomplete({
                source: function (request, response) {
                    var prefix = request.term.toLowerCase();
                    $.get("https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json", function (data, status) {
                        var customers = JSON.parse(data);
                        if (prefix != '') {
                            customers = customers.filter(function (customer) {
                                return customer.Name.toLowerCase().indexOf(prefix) != -1
                            });
                        }
                        response($.map(customers, function (obj) {
                            return obj.Name;
                        }))
                    });
                },
                select: function (e, i) {
                },
                minLength: 0
            }).focus(function () {
                $(this).autocomplete("search");
            });
        });
    </script>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Populate jQuery AutoComplete from API using AJAX in ASP.Net MVC

Company

Explore

Follow us

Contact Us