weixin_33693070 2017-09-04 07:30 采纳率: 0%
浏览 32

如何提前完成Ajax

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>
  • 写回答

1条回答 默认 最新

  • 喵-见缝插针 2017-09-04 09:11
    关注

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

报告相同问题?

悬赏问题

  • ¥15 三菱变频器模块怎么检测触发
  • ¥15 在C#方法中使用了.Refresh();刷新了控件,但是不是最新值
  • ¥30 求一下解题思路,完全不懂。
  • ¥30 关于#硬件工程#的问题:求一下解题思路
  • ¥15 运筹学对偶单纯行法构造扩充问题
  • ¥20 XP系统的老电脑一开机就提示找不到rundll.exe,付费求解
  • ¥15 milvus查询出来的score怎么转换成0-1之间的相似性
  • ¥15 lvgl V9移植到linux开发板
  • ¥15 VB.net中在窗体中创建一个button控件来关闭窗体,但是提示错误,我该怎么办
  • ¥15 网上下载好的程序但是arduinoIDE编程报错,运行不了,哪里出错了,能具体给改一下吗