0

The javascript below is supposed to be some sort of autocomplete. I am using bootstrap typeahead.

When I type items in my input field, I am able to see suggestions, the problem is I am not able to select them and populate the input field. Any idea what may be wrong with it?

<script type="text/javascript">
    $('#typeahead').typeahead({
    source:  function (query, process) {
         objects = [];
         map = {};

        return $.get('live_search.php?filter=relation', { query: query }, function (data) {
                console.log(data);
                var data = $.parseJSON(data);
                return process(data);   
            });


            $.each(data, function(i, object) {
            map[object.name] = object;
            objects.push(object.name);
            });

            process(objects);

    },
    updater: function(item) {
        $('#getSelection').val(map[item].name);
        $('#getValue').val(map[item].name);
        return item;
    }
});
</script>
Dani M
  • 121
  • 8
  • 1
    Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Teemu Feb 25 '18 at 13:21
  • @Teemu How is it a duplicate of that one??? – Dani M Feb 25 '18 at 13:22
  • You've a return statement in the callback function, read the dup and you'll understand. – Teemu Feb 25 '18 at 13:23
  • @Teemu I am able to return the data in two different ways, my problem is not that. Please before you mark it as a duplicate, read it! – Dani M Feb 25 '18 at 13:24
  • @Teemu and you better read my question. My question is how to return the data from a php file basically, not how to in general. – Dani M Feb 25 '18 at 13:25
  • You're not be able to return data to any receiver you could access from the callback function of the asynchronous function call. And `echo` is pretty much the most used PHP statement when returning data to an ajax call. – Teemu Feb 25 '18 at 13:25
  • @Teemu I find your intervention quite inappropriate frankly. My question is more specific, and if you cannot see that, then fine – Dani M Feb 25 '18 at 13:28
  • Well, it's your code and your problem, as you wish ... – Teemu Feb 25 '18 at 13:29
  • @Teemu I did some modifications to the question, since maybe I wasn't that clear in the beginning! – Dani M Feb 25 '18 at 14:01

1 Answers1

0

It looks like your source method returns immediately from the $.get call and never enters the $.each iteration. Move the iteration code into the get request callback block.

Also you're references to objects and map are in the scope of the source method, but you reference them in the updater method

var typeahead = {
  objects: [],
  map: {},
};

$("#typeahead").typeahead({
  source: function(query, process) {
    return $.get("live_search.php?filter=relation", { query: query }, function(
      data
    ) {
      var data = $.parseJSON(data);

      $.each(data, function(i, object) {
        typeahead.map[object.name] = object;
        typeahead.objects.push(object.name);
      });

      return process(data);
    });
  },
  updater: function(item) {
    $("#getSelection").val(typeahead.map[item].name);
    $("#getValue").val(typeahead.map[item].name);
    return item;
  },
});
AlexSashaRegan
  • 321
  • 3
  • 8