JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <input type="hidden" id="url_id" value="">
    <input id="hotelNameKey" type="text" />

JavaScript

$(function(){
$.widget("custom.autocomplete", $.ui.autocomplete, {
    _create: function() {
        this._super();
        this.widget().menu("option", "items", "> :not(.auto-complete)");
    },
    _renderMenu: function(ul, items) {
        var that = this,
            currentCategory = "";
        $.each(items, function(index, item) {
            //kota
            var li;
            if (item.category != currentCategory) {
                ul.append("<li class='auto-complete'>" + item.category + "</li>");
                currentCategory = item.category; //buat category
            }
            li = that._renderItemData(ul, item);
        });
    }
});

var getData = function(request, response) {
    $.ajax({
        url: '//htlsearch.pegipegi.com/HotelSearchAPI/v1/autocomplete/' + request.term,
        dataType: 'json',
        success: function proccessData(data) {
            dataCity = data.city.map(function(city) {
                return {
                    id: city.url,
                    label: city.city + " " + city.count + " Hotel Terdaftar",
                    value: city.city,
                    category: "Kota"
                }
            });

            dataArea = data.area.map(function(area) {
                return {
                    id: area.url,
                    label: area.area + " " + area.count + " Hotel Terdaftar",
                    value: area.area,
                    category: "Area"
                }
            });

            dataHotels = data.hotels.map(function(area) {
                return {
                    id: area.hotel_id,
                    label: area.hotel_name,
                    value: area.hotel_name,
                    category: "Hotel"
                }
            });
            var cityAreaHotel = dataCity.concat(dataArea).concat(dataHotels);
            response(cityAreaHotel);
        },
        //here is the problem, the alert doesn't show. thank you
        error: function(data) {
       ...