Question

我是明天的新手。我从远程获取json数据并显示在网络中。问题是返回的数据未在文本框中自动完成。以下是我的代码

使用的样式和脚本

<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>

文本框

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

脚本

<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返回数据

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

我正在使用laravel框架。如何自动完成在该文本框中返回的数据。请帮助我。

Answer 1

有点晚了但是，这段代码对我有用。

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

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

typeAhead自动完成功能无效

1 个答案: