JSFiddle - React, Tailwind, and code Playground

by chiragvidani

HTML

<link rel="stylesheet" href="http://demos.jquerymobile.com/1.3.0-rc.1/css/themes/default/jquery.mobile-1.3.0-rc.1.css">
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
    	<h3>Cities worldwide</h3>

    <p>After you enter <strong>at least three characters</strong> the autocomplete function will show all possible matches.</p>
    <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d"></ul>
</div>

CSS

.ui-listview-filter-inset {
    margin-top: 0;
}

JavaScript

$(document).ready(function () {
    $("#autocomplete").on("listviewbeforefilter", function (e, data) {
       
        var $ul = $(this),
            $input = $(data.input),
            value = $input.val(),
            html = "";
        $ul.html("");
        if (value && value.length > 2) {
            $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
            $ul.listview("refresh");
            $.ajax({
                url: "http://utmc.traffic-wales.com/suggest.aspx",
                dataType: "jsonp",
                crossDomain: true,
                data: {
                    Network: $input.val()
                }
            })
                .then(function (response) {
                    var a = response.split('|');
                    var b = new Array();
                    for(var i =1;i<a.length - 1; i++)
                        b.push(a[i]);
                $.each(b, function (i, val) {
                    html += "<li>" + val + "</li>";
                });
                $ul.html(html);
                $ul.listview("refresh");
                $ul.trigger("updatelayout");
            });
        }
    });
});