Bloodhound / typeahead : using remote with simple strings

Question

I'm trying to use typeahead.js with bloodhound to dynamically fetch autocomplete sugestions for an input field while the user is typing. However, I'm a noob at it and I can't figure out how to do it properly, and I found a lot of contradicting examples online that are confusing me.

Here is as far as I got: EDIT: code updated after the suggestions in the comments:

My html:

<input type="text" data-provider="typeahead" placeholder="Cerca..." id="txtAutoSearchBox" />

My JS:

        $(document).ready(function () {
    //setup bloodhound engine
    var suggestions = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: './Suggestions.ashx?query=%QUERY',
            wildcard: '%QUERY'
        }
    });

    suggestions.initialize();

    //assign it to input field
    $('#txtAutoSearchBox').typeahead({
        items: 4,
        displayKey: 'value',
        source: suggestions.ttAdapter()
    });        
});

I can confirm that the query to my server is being made correctly every time the user inputs something in the field. The server returns just a string in the following form:

[
{"value": "test adsl"},
{"value": "test"},
{"value": "testi canzoni"},
{"value": "testo incanto"},
{"value": "testimoni di geova"},
{"value": "testo siamo uguali"},
{"value": "testo straordinario chiara"},
{"value": "testo see you again"},
{"value": "testo guerriero"},
{"value": "testosterone"}
]

However, the autocomplete popup doesn't appear. How do I edit the above code to make it work properly?

your server should not output strings like that. It should output an object. Something like `['suggestion 1', 'suggestion 2' .... ]` or JSON like `{result: ['value': 'suggestion 1', .... ]}` — Dhiraj, Jun 05 '15 at 13:41
@DhirajBodicherla I changed my server code to output the string exactly how you show in your first example, but it still doesn't work, seems I'm still missing something. (I'll edit the question with updated string) — Master_T, Jun 05 '15 at 15:29
yes, that is just the first step. I firstly, wanted to understand if changing the server side code was fine with you. Let me share with you the final step. — Dhiraj, Jun 05 '15 at 15:37

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Use bloodhound's filter method like this

filter: function(data) {
  return $.map(data, function(item) {
    return {
      'value': item
    };
  });
}

Bloodhound object should looks like this

var dataSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: "http://output.jsbin.com/cajebe/1.json",
        filter: function(data){
            return $.map(data, function(item){
                return {'value' : item};
            });
        }
    }
});

PS: The data from the server should be of JSON format

Here is a demo http://jsfiddle.net/dhirajbodicherla/pegp21r7/35/

update

Typeahead is missing correct parameters. It should be

typeaheadjs: [ {options}, {datasets} ]

$('#txtAutoSearchBox').typeahead(null, { // <--- missing this null
    items: 4,
    displayKey: 'value',
    source: suggestions.ttAdapter()
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 05 '15 at 15:42

Dhiraj

33,140
10
61
78

"prefetch" mode is no good for me, I have to get new suggestions every time the user inputs something. I tried to change it to "remote" but I couldn't get it to work, even tho the filter method is correctly called each time no suggestions popup appears on the input field. – Master_T Jun 05 '15 at 16:43
in that case the best you can do is let the server output in this format http://output.jsbin.com/folino/1.json. Then you can still use remote and filter will not be required anymore – Dhiraj Jun 05 '15 at 16:49
Just tried it, but no luck. I see no JS errors and the query IS executed, but nothing at all happens on the web page. Later I'll update my page with the html, maybe it's a problem there (tho it's just an "input" field with nothing weird..) – Master_T Jun 06 '15 at 11:19
edited the code in the original question to reflect the changes I made so far. – Master_T Jun 06 '15 at 11:58

Bloodhound / typeahead : using remote with simple strings

1 Answers1

update

Linked