如何进行 ajax 预输入

Question

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

但结果相同。

有人可以帮我解决这个问题吗？

Answer 1

您可以使用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
    });
  }
});