Returning results not displayed with typeahead and bootstrap

Question

I was spending all my time to resolve this problem.

I tried to make functionaly an ajax call with bootstrap+typeahead.

If someone can help me, it will be great

This my HTML part :

<div class="control-group">
   <label class="control-label">Parent</label>
   <div class="controls">
     <input type="text" value="" name="parent" id="parent" autocomplete="off"  data-provide="typeahead" />
   </div>

This is my JS part :

$(document).ready(function() {
    $('#parent').typeahead({
        source: function (query, process) {
        return $.ajax({
            minLength: 1,
            url: "/ajax/places/",
            type: 'POST',
            data : 'query='+query,
            dataType: 'json',
            success: function (data) {
                return typeof data == 'undefined' ? false : process(data);
        }
    }); 
        }
    });
});

I can see Ajax fired, and the Json , here it is an extract :

[
         "name": "Aix"
    ,      "name": "Aix"
    ,      "name": "Aix en Diois"
    ,      "name": "Aix en Ergny"
    ,      "name": "Aix en Issart"
    ,      "name": "Aix en Othe"
    ,      "name": "Aix en Provence"
    ,      "name": "Aix la Fayette"
    ,      "name": "Aix les Bains"
    ,      "name": "Aix Noulette"
    ,      "name": "Aixe sur Vienne"
    ,      "name": "Artaix"
    ,      "name": "Baix"
    ,      "name": "Baixas"
    ,      "name": "Benaix"
    ,      "name": "Caix"
    ,      "name": "Caixas"
    ,      "name": "Caixon"
    ,      "name": "Carhaix Plouguer"
    ,      "name": "Chaix"
]

If I "console.log(data)", everything seems to be ok.

Thanks you for your help !!

---

It works if I remove the "name" property, like that :

[
         "Aix"
    ,      "Aix"
    ,      "Aix en Diois"
    ,      "Aix en Ergny"
    ,      "Aix en Issart"
    ,      "Aix en Othe"
    ,      "Aix en Provence"
    ,      "Aix la Fayette"
    ,      "Aix les Bains"
    ,      "Aix Noulette"
    ,      "Aixe sur Vienne"
    ,      "Artaix"
    ,      "Baix"
    ,      "Baixas"
    ,      "Benaix"
    ,      "Caix"
    ,      "Caixas"
    ,      "Caixon"
    ,      "Carhaix Plouguer"
    ,      "Chaix"
]

But now How can I use Id and name ?

EDIT : I used this Bootstrap typeahead ajax result format - Example and found solution

I'll show you what I did with other process.

Answer 1

The "stuff" returned is not valid JSON, and that's probably why the client-side Javascript is unable to deal with it.

If it is suppose to be a JSON Object, it should look like this:

   { "name1": "Aix"
      , "name2": "Aix"
      , "name3": "Aix en Diois"

etcetera. (Note that the attribute names need to be unique. It is legal in theory to have multiple attributes with identical names. However this won't work. All JSON parsers I've ever encountered will discard all but one of the corresponding values.)

If it is suppose to be a JSON array it should look like this:

   { "Aix"
      , "Aix"
      , "Aix en Diois"

etcetera. Or maybe:

   [ {"name": "Aix"}
      , {"name": "Aix"}
      , {"name": "Aix en Diois"}

etcetera, which is a JSON array of objects.

Reference:

• The syntax of JSON .

Answer 2

This is my complete solution :

<div class="control-group">
    <label class="control-label">Parent</label>
    <div class="controls">
       <input type="text" value="" class="typeahead" autocomplete="off"  data-provide="typeahead" />
       <input type="hidden" value="" id="parent" name="parent" />
   </div>
</div>

$(document).ready(function() {
    $('.typeahead').typeahead({
        source: function (query, process) {

            category = $("#category").val();
            list = [];

            return $.ajax({
                minLength: 3,
                url: "/ajax/places/",
                type: 'POST',
                data : { query: query, categorySon: category },
                dataType: 'json',
                success: function (result) {

                    var resultList = result.aaData.map(function (item) {

                        list[item.name + ' - ' + item.code + ' (' + item.category + ')'] = item.id;
                        return item.name + ' - ' + item.code + ' (' + item.category + ')';

                    });

                    return process(resultList);

                }

            }); 
        },
        updater: function (item) {
            $("#parent").val(list[item]);
            return item;
        }
    });
});