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

Answer 2

There must be something wrong with your Ajax call because typeahead seems to be updating at each character typed in the search box, see demo:

//
$('#phone-autocomplete').typeahead({
  source: function(query, process) {
    data = ["9876124", "9812124", "9875124", ];
    console.log(`Ajax call with query: ${query}`);
    return process(data);
  },
  'updater': function(item) {
    this.$element[0].value = item;
    console.log(item);
    this.$element[0].form.submit();
    return item;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

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

Here's a demo showing how to get the output from the Ajax call (note: I set Ajax async to false).

See: https://api.jquery.com/jQuery.get/

//
$.ajaxSetup({
  async: false,
});
$('#phone-autocomplete').typeahead({
  source: function(query, process) {
    console.log(`Ajax call with query: ${query}`);
    var data = [];
    $.get("example.php", function(data) {
        //alert("success");
      })
      .done(function() {
        //alert("second success");
      })
      .fail(function() {
        //alert("error");
      })
      .always(function() {
        //alert("finished");
        data = ["9876124", "9812124", "9875124", ];
        console.log(`data = ${data}`);
      });
    return process(data);
  },
  'updater': function(item) {
    this.$element[0].value = item;
    console.log(item);
    this.$element[0].form.submit();
    return item;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

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

You just need to remove the lines

data = ["9876124", "9812124", "9875124", ];
console.log(`data = ${data}`);

from the always callback function and populate data in the done callback instead. Hope this helps!