如何提前完成Ajax

Question

I am newbie in Typeahead. Now I need to change typeahead from static way to ajax way. The code is like,

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;
                }
            });

Then I output the array to a json file "city.json" and put it under the project folder where I can visit by openning localhost/city.json, then I tried the code like.

   $('#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);
                });

It doesn't work, and did not throw any errors.

And then I tried this way.

    $('#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;
            }
        });

But same result.

Could somebody help me with this?

</div>

Answer 1

You can use BloodHound for make this. You must be insert function inside the Ajax request. An example working below:

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
    });
  }
});

UPDATE

Replace your each function:

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
    });
  }
});