javascript - 如何提前进行Ajax输入

我是Typeahead的新手。现在我需要将typeahead从静态方式更改为ajax方式。
代码就像

var countries2 = [{ labelPost: "AUSTRALIAN NATIONAL UNIVERSITY ACT 200", valuePost: 200 },
   { labelPost: "DARWIN NT  800", valuePost: 800 }, { labelPost: "DARWIN NT  801", valuePost: 801 }, { labelPost: "WAGAIT BEACH NT  803", valuePost: 803 },
   { labelPost: "PARAP NT  804", valuePost: 804 }, { labelPost: "ALAWA NT  810", valuePost: 810 }, { labelPost: "BRINKIN NT  810", valuePost: 810 }, { labelPost: "CASUARINA NT  810", valuePost: 810 }];

$('#txtPostcode').typeahead({
                name: 'Postcode',
                displayText: function (item) { return item.labelPost; },
                items: 10,
                source: countries2,
                updater: function (item) {
                    $('#txtPost').val(item.valuePost);
                    return item.labelPost;
                }
            });

然后，将数组输出到json文件“ city.json”，并将其放在项目文件夹下，通过打开localhost / city.json可以访问该文件夹，然后尝试执行类似的代码。

   $('#txtPostcode').typeahead({
            name: 'Postcode',
            displayText: function (item) { return item.city; },
            items: 10,
            source: function (query, process) {
                var parameter = { query: query };
                $.get('city.json', parameter, function (data) {
                    process(data);
                });

它不起作用，也没有引发任何错误。

然后我尝试了这种方式。

    $('#txtPostcode').typeahead({
            name: 'Postcode',
            displayText: function (item) { return item.labelPost; },
            items: 10,
            source: {
                ajax: {
                    url: "/city.json",
                }
            },
            updater: function (item) {
                $('#txtPost').val(item.valuePost);
                return item.labelPost;
            }
        });

但结果相同。

有人可以帮我吗？

最佳答案

您可以使用BloodHound来实现。您必须在Ajax请求内插入函数。下面的示例工作：

var cities = [];
var firstnames = [];

$.ajax({
  url: "your.json", // load your Json
  cache: false,
  dataType: "json",
  success: function(data) {
    $.each(data, function(i, field){ // create a table with your data
        cities.push(field);
    });
    var firstcitynames = new Bloodhound({ // use Bloodhound for create maping of your data
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: $.map(cities, function(cityName) { return { value: cityName }; }),
        limit:50
    });

    firstcitynames.initialize();

    $("#scrollable-dropdown-menu .typeahead").typeahead({
        hint: false,
        highlight: true,
        minLength: 3
    },
    {
        name: "firstcitynames",
        displayKey: "value",
        source: firstcitynames.ttAdapter()
    }).bind("typeahead:selected", function(obj, datum, name) {
        // here action after select choice
    });
  }
});

更新

替换每个函数：

var cities = [];
var firstnames = [];

$.ajax({
  url: "http://vocab.nic.in/rest.php/country/json",
  cache: false,
  dataType: "json",
  success: function (data) {
    $.each(data.countries, function (i, field) {
      cities.push(field.country.country_name);
    });

    var firstcitynames = new Bloodhound({ // use Bloodhound for create maping of your data
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: $.map(cities, function (cityName) { return { value: cityName }; }),
      limit: 50
    });

    firstcitynames.initialize();

    $(".typeahead").typeahead({
      hint: false,
      highlight: true,
      minLength: 1
    },
   {
      name: "firstcitynames",
      displayKey: "value",
      source: firstcitynames.ttAdapter()
    }).bind("typeahead:selected", function (obj, datum, name) {
      // here action after select choice
    });
  }
});