Autocomplete typeahead search, using ajax calls troubleshooting

Question

I'm trying to use a text input as a search box, to retrieve search results via ajax calls, using bootstrap typeahead plugin

<form class="form-inline ml-3" action="/phone-autocomplete/">
    <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar typeahead" data-provide="typeahead" autocomplete="off"
         id="phone-autocomplete" type="search" name="searchstring" placeholder="search phone" aria-label="Search">
        <div class="input-group-append">
            <button class="btn btn-navbar" type="submit">
                <i class="fas fa-search"></i>
            </button>
        </div>
    </div>
</form>

My data source returns a text/xml response like this:

[ "9876124", "9812124","9875124",] 

My javascript, after including all required packages, is as follows:

    $('#phone-autocomplete').typeahead({
        source: function (query, process) {
            return $.get('/phone-autocomplete/', { searchstring: query }, function (data) {
                console.log(data);
                return process(data);
            });
            
        },
        'updater' : function(item) {
            this.$element[0].value = item;
            console.log(item);
            this.$element[0].form.submit();
            return item;
        }
    });
      
</script> 

The purpose is for the search input to send a request every time the user types a character, and return back an updated list of items

The problem I have is it only works with one digit, then it stops being displayed for some reason

This is using the bootstrap3-typeahead.min.js package

Thanks

Answer 1

I solved it, apparently, it's fundamental to set the MIME type of your remote response to application/json, outputting a text string or HTML doesn't work and fails silently