How to do so that the value of the input does not disappear


I am new using the typeahead.js with Django . I am also using handlebars_min.js . When I write three characters, the elements of my list that match the search are displayed. When I click, the element is put in input . The problem is that when I choose the element and give click outside the input , the value of input disappears.

Here is my code

def json_destino(request):
destino = request.GET.get('q', None)

if not destino:
    return HttpResponse(json.dumps({}))

destinos = Clientes.objects.filter(nombre__icontains=destino)

vl = [{'name': c.nombre,'destino': c.nombre} for c in destinos]
vl = vl[:10]
ret = json.dumps(vl[:10])
return HttpResponse(ret)

File autocomplete.js

var engine1 = new Bloodhound({
    remote: '/destino/name/json/?standard=true&q=%QUERY',
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,


$('#id_destino').typeahead({minLength: 3,highlight: true}, {
    name: 'destino',
    displayKey: 'id',
    source: engine1.ttAdapter(),
    templates: {
        empty: [
            '<div class="empty-message">',
            'No se ha encontrado ningun elemento',
        suggestion: Handlebars.compile('<p style="border: 1px solid red; padding: 5px;">'+
            '<span class="text-primary" style="font-size:20px;">{{name}}</span><br>' +
}).bind('typeahead:selected', function(obj, datum) {
    taselected(obj, datum);
}).bind('typeahead:autocompleted', function(obj, datum) {
    taselected(obj, datum);

function taselected(obj, datum) {




<div id=div_id_destino>
     <input type="text" name="destino"  id="id_destino" />
<script src="{% static 'js/autocomplete.js' %}"></script>
asked by Yoana 12.01.2017 в 22:18

1 answer


in the request to /destino/name/json/?standard=true&q the json you return with HttpResponse(ret) I do not think you have any of your items the key value , as you define it here:

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value')

try to change it to:

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('destino')

which will make the search in the text field be%% of% or if you want%% of%

in this line:


I can not find the documentation for that twitter typeahead option, are you sure it's not name instead of displayKey: 'id', ?


I leave a link to jsfiddle with an example so you can achieve implement your best code.

try to put the display function code to know if there is not an error there, and check your browser's console for javascript errors.


answered by 12.01.2017 в 23:38