CODEWITHSUNDEEP
jsontwitter-bootstrapautocompletetypeahead.jstwitter-typeahead
Bipin
Bipin

Reputation: 354

typeAhead autocomplete is not working

I am new to typeahead. I am getting the json data from remote and is shown in the network. The problem is The returned data is not autocompleted in the text box. Below is my code

Style and Script Used

<link href="{{ asset('css/bootstrap-tagsinput.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/bootstrap-tagsinput-typeahead.css') }}" rel="stylesheet" type="text/css" />

<script src="{{ asset('js/bootstrap-tagsinput.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/handlebars.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/typeahead.bundle.min.js') }}" type="text/javascript"></script>

Textbox

 <input type="text" name="language" placeholder="Language" id="typeahead_lang" class="tagsinput-typeahead"/>

Script

<script>
$(document).ready(function () {


var cities = new Bloodhound({
  datumTokenizer : Bloodhound.tokenizers.obj.whitespace('text'),
  queryTokenizer : Bloodhound.tokenizers.whitespace,     
  remote: {
    url: '{{ route("admin.packagelanguage") }}',

  }
});

cities.initialize();

var elt = $('#typeahead_lang');
  elt.tagsinput({
    itemValue: 'value',
    itemText: 'text',
    typeaheadjs: {
      name: 'cities',
      displayKey: 'text',
      source: cities.ttAdapter()
    }
  });
});


</script>

Json Returned data

[{text: 'English', value:'1' },{text: 'Afar', value:'2' },{text: 'Abkhazian', value:'3' },{text: 'Afrikaans', value:'4' },{text: 'Amharic', value:'5' }]

I am using laravel framework. How to autocomplete the returned the data in that text box. Please Help me.

Upvotes: 0

Views: 883

Answers (1)

Samuel Loza
Samuel Loza

Reputation: 121

A little late but,this code works for me.

var elt = $('#elt');
 elt.tagsinput({

  itemValue: 'value',
  itemText: 'text',
  typeaheadjs: [{
     hint: true,
     highlight: true,
     minLength: 2
  },{
     name: 'cities',
     displayKey: 'text',
     source: cities.ttAdapter()
   }
  ]
});

Upvotes: 1

Related Questions